0

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>
    );
  }

}
1
  • As an aside, as advice, you should always write actual variable names. Those little one letter variables make it very hard for anybody to process what is happening and it can help you identify bugs quicker if you make them expressive. Commented Jul 31, 2020 at 16:09

1 Answer 1

2

From the docs: dangerouslysetinnerhtml can be used to render html from string

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

<tr dangerouslySetInnerHTML={{all}}><button type="submit" className="delete">Delete</button></tr>
Sign up to request clarification or add additional context in comments.

7 Comments

<noscript>You need to enable JavaScript to run this app.</noscript> Thats the error im getting when doing so.
do you have javascript disabled? and what browser are you using, also which version
Just tested it , its enable.
try to move the <button type="submit" className="delete">Delete</button> to the all variable cause you can't have multiple dangerouslySetInnerHTML
Thank you very much mate, you led me on the right road and i figured this out with your help!! I added this line on map : (<tr dangerouslySetInnerHTML={{__html:all + y}}></tr>)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.