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


});

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


});

• javascript
• html
• reactjs

Share Improve this question Follow edited May 4, 2017 at 13:42 Chris 59.6k2020 gold badges120120 silver badges142142 bronze badges asked May 4, 2017 at 13:41 Mayank BhanagayMayank Bhanagay 5711 gold badge22 silver badges55 bronze badges 4

• Please explain your problem a bit more. What's the issue exactly? :) – Chris Commented May 4, 2017 at 13:41
• this.target.value will not automatically bind the data to the <li>, if that is what you are expecting. Rather pass the data along with your save function. Manipulate the data and add it to some state of your class and then try binding the state – Saurabh Tiwari Commented May 4, 2017 at 13:50
• you should use the state and update it – Naveed Aheer Commented May 4, 2017 at 14:52
• Can somebody answer this question using React Hooks?! – Akhila Commented Sep 5, 2020 at 14:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="app"></div>

To add to Shubnam's answer, consider using ES6 classes and initializing the state in the constructor, since using ES6 classes is the remended 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./react-create-class-versus-ponent/

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

`` 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;