[Solved]-How to dynamically show/hide a list of items in react-Reactjs

class entriestable extends react.component {
    constructor(props) {
        super(props);

        console.log(this.props.plannerid);
        this.state = { 
            editabletasks: [],
            tasks: [],
            plannerid: this.props.plannerid,
        };

        var state = this.state;
        /* this isn't completely necessary but usually it is recommended you 
         * bind the class method in the constructor so it isn't bound on each
         * render
         */
        this.edittask = this.edittask.bind(this);
    }

    componentdidmount() {
        this.gettasks(this.state.plannerid);
    }

    edittask(id) {
        /* so jquery and react are kind of at odds with each other on fundamentals
         * react is supposed to be declarative whereas jquery is imperative. using 
         * jquery and react together is typically discouraged unless there is a real
         * need for it. in react you are supposed to define how you want the ui to render
         * based on some variables. you have two options available to you props and state.
         * props are passed from the parent and are immutable. state is managed within that
         * component and is mutable. so we have added a variable called editabletasks to your
         * state that will contain an array of all editable tasks. instead of trying to hide 
         * or show items here, we are simply going to add the id of now editable task to that
         * array
         * 
         */
        var nextstate = this.state;
        nextstate.editabletasks.push(id);
        this.setstate(nextstate);
    }

    updatetask(id, name) {
        $.ajax({
            type: "get",
            url: "/task/update",
            data: { id: id, name: name },
            contenttype: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                //this.setstate({ tasks: data.returnobject, loading: false });
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    createtask(name) {
        //make api call to create planner here.

        var data = {
            name: name,
            plannerid: model.plannerid,
            status: "not complete",
            description: "",
            affiliation: "",
            footprint: "",
            created: new date(),
            modified: null,
        };

        $.ajax({
            type: "post",
            url: "/task/add",
            data: json.stringify(data),
            contenttype: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                this.gettasks(model.plannerid);
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    gettasks(id) {
        this.setstate({ tasks: [], loading: true });
        $.ajax({
            type: "get",
            url: "/task/getall",
            data: { id: id },
            contenttype: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                this.setstate({ tasks: data.returnobject, loading: false });
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    render() {
        const tasks = this.state.tasks.map((task) => {
            var editable = this.state.editabletasks.filter(id => id === task.id).length > 0;
            /* now here we are going to check whether this item is editable
             * based on id. so we assign a variable that will eval to a bool
             * based on whether when you filter editabletasks to see if it contains
             * the current items id the length is greater than 0. 
             *
             * now below instead of applying some id attribute we are going to return either
             * the input or the span based on whether it is editable using a ternary operation
             *
             */
            return (
               <li key={task.id} classname="list-group-item" style={{minheight: '50px'}}>
                   <div classname="pull-left" style={{width: '50%'}}>
                       {editable ? <input type="text" /> : <span onclick={this.edittask( task.id)}>{task.name}</span>}
                       
                   </div>
                   <div classname="pull-right" style={{margintop: '-5px', width: '50%'}}>
                       <div classname="pull-right">
                            <button classname="btn btn-default">add</button>
                            <button classname="btn btn-default">edit</button>
                        </div>
                   </div>
               </li>
            );
        });
        return (
          <div classname="table-wrapper">
            <div classname="task-container">
                <h3>{this.props.rowname}</h3>
            </div>
            <ul id="taskscontainer">
                {tasks}
                <li classname="list-group-item list-group-item-last"><input type="button" value="add task" onclick={this.addtask.bind(this)} classname="btn btn-success btn-override" /></li>
            </ul>
          </div>

      );
    }
};