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

this.setState({ title: '' }); Props it is properties of your components and passing as like attributes from state to your components. State it is a "singleton" class state of your application — Igor Semin
– Igor Semin, Commented Jan 30, 2017 at 21:07
Props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state — Igor Semin
– Igor Semin, Commented Jan 30, 2017 at 21:27

Gino Llerena · Accepted Answer · 2017-01-30 21:23:39Z

2

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

answered Jan 30, 2017 at 21:23

Gino Llerena

51612 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

youngtoken Over a year ago

that worked fine thanks and one last question do you suggest to keep up with reactjs or switch to angular2 i ve read that react js is much easier to learn but i wanna have your opinion :c

Gino Llerena Over a year ago

At the beginning, I started learning Angular, but for work, I had to learn and use React, now I'm comfortable with it and I a big fan of React. Good luck!

Collectives™ on Stack Overflow

react insert data with input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related