react insert data with input

Question

I just got into ReactJS. I'm having a lot of problems learning it, everytime I get demotivated while working with it. I want to insert data into h1 with input. I followed some tutorials, googled some code but I couldn't make it work.

 export default class Header extends React.Component{ constructor(){ super(); this.state={title:''}; this.handleChange = this.handleChange.bind(this); this.changeHtml = this.changeHtml.bind(this); } changeHtml(title){ this.setState({title:title}); } handleChange(event){ const textInput = event.target.value; this.props.changeHtml(textInput); } render(){ return ( <div> <h1 title={this.props.title} changeHtml={this.changeHtml} > </h1> <label> Name: <input type="text" name="name" onChange={this.handleChange} /> </label> </div> ); } } 

also could you tell me what is the diffrence between state and props ? and what does they actually mean or refer to ( ex: input or something else) i dont know if i should keep up with react or learn another language such as angular

Answer 1

I remove some boilerplate from your code, I guess it could help you as starting point, but you need to understand what is the real sense of "state" and "props". https://jsfiddle.net/69z2wepo/68722/

class Header extends React.Component{

constructor(){
    super();
    this.state={title:''};
    this.handleChange = this.handleChange.bind(this);
}

handleChange(event){
    const textInput = event.target.value;
    this.setState({title:textInput});
}

render(){
        return (
            <div>
               <h1>{this.state.title}</h1>
                    <label>Name:
               <input type="text" onChange={this.handleChange} />
                    </label>
            </div>);
    }
}

ReactDOM.render(
  <Header />,
  document.getElementById('container')
);