so i came across this problem where my code gets spitted to string instead of html that im trying to achieve.My question is how can i transform this into innerHTML before spitting? Is it even possible to do this if i push it to the array? My goal is to make this like "to do list app" that has multiple inputs that spit each value to each row.
class Forma extends React.Component {
constructor(){
super()
this.state ={
name: '',
birth: '',
age: '',
items: []
}
this.handleInputChange = this.handleInputChange.bind(this)
this.submitItem = this.submitItem.bind(this)
}
handleInputChange(event){
let name = event.target.name
let birth = event.target.birth
let age = event.target.age
let value = event.target.value
this.setState({ [name] : value, [birth] : value, [age] : value})
}
submitItem (){
let items = this.state.items
let item = this.state.name
let birth =this.state.birth
let age = this.state.age
let i = "<th>"
let z = "</th>"
let all =i + item + z + i + birth + z + i + age +z
items.push(all)
this.setState({ items: items})
}
render(){
return (
<div className="App">
<h1>To do List</h1>
<input type="text" name="name" onChange={this.handleInputChange}></input>
<input type="text" name="birth" onChange={this.handleInputChange}></input>
<input type="text" name="age" onChange={this.handleInputChange}></input>
<button onClick={this.submitItem}>Submit</button>
{this.state.items.map((all) => {
return(
<tr>{all}<button type="submit" className="delete">Delete</button></tr>
);
})}
</div>
);
}
}