CODEWITHSUNDEEP
javascriptreactjsinput
youngtoken
youngtoken

Reputation: 152

react insert data with input

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

Upvotes: 0

Views: 2952

Answers (1)

Gino Llerena
Gino Llerena

Reputation: 516

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

Upvotes: 2

Related Questions