how to add input data to list in react js?

Question

I am trying to make a Todo application but i am stuck,I am not able to proceed further. Please help

var Todo= React.createClass({
    save() {
      this.refs.newText.value
    },

    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref="newtext" defaultValue={this.props.children} />
              <button onclick={this.save} className="btn btn-primary glyphicon glyphicon-floppy-saved">
              </button>
              <ul>
                <li>{this.target.value}</li>
              </ul>
            </div>
        )
    },


});

Answer 1

Maintain a state where in you will add the newly added item and then iterate over it to display in your view. Also you should not be using string refs, rather you should be going for ref callbacks as suggested by the react-docs. Also the onclick on button should be camelcase like onClick

 var Todo= React.createClass({ getInitialState() { return { todos: [] } }, save() { var todos = [...this.state.todos]; todos.push(this.newText.value); console.log(todos) this.setState({todos}); }, render(){ return( <div className="list"> <h1> TO-DO List</h1> <input type="text" ref={(ip) => {this.newText = ip}}/> <button onClick={this.save} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save </button> <ul> {this.state.todos.map(function(todo) { return <li>{todo}</li> })} </ul> </div> ) }, }); ReactDOM.render(<Todo/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> <div id="app"></div> 

Answer 2

To add to Shubnam's answer, consider using ES6 classes and initializing the state in the constructor, since using ES6 classes is the recommended way now. React.createClass is now deprecated and shows a warning on the console. Check this code, notice that you will need to bind the save method.

Check these links for more info:

https://facebook.github.io/react/blog/#migrating-from-react.createclass

https://toddmotto.com/react-create-class-versus-component/

 class Todo extends React.Component { constructor(props) { super(props); this.state={todos:[]}; } save() { var todos = [...this.state.todos]; todos.push(this.newText.value); this.setState({todos}); } render(){ return( <div className="list"> <h1> TO-DO List</h1> <input type="text" ref={(ip) => {this.newText = ip}}/> <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save </button> <ul> {this.state.todos.map(function(todo) { return <li>{todo}</li> })} </ul> </div> ) } }; ReactDOM.render(<Todo/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 3

`` import React, { Component } from 'react'; import Nav from './nav';

class Delete_Contect extends Component {

constructor(props)
{
    super(props);

    this.state={
        name:'vishal',

        name_add:[1,2,4]
     };
    
    this.Change = this.Change.bind(this);
    this.Add_data = this.Add_data.bind(this);
}

Change()
{
    this.setState(
    {
         name:'boss'
    }
  )
}
Add_data(e)
{   
    const newContect = this.newText.value

    this.setState({

       name_add: [...this.state.name_add, newContect]
  
    })
}

render() {
   return (

      <div>

            {this.state.name_add.map((number) => {

                return(

                   <li>{number}</li>

               )

           })}

           <input type="text" ref={(ip) => {this.newText = ip}} />

           <button onClick={this.Add_data}>submit</button>        

         </div>

    );
}

}

export default Delete_Contect;