title: How to dynamically show/hide a list of items in react
body: <p>I'm having trouble being able to show/hide certain elements in react. Basically, I have a dynamic list of li's, and within the li, I have an label, when you click on the li I want to hide the label and show an input. Usually with jQuery it's as easy as</p>
  
  <p><code>$('#element').hide()
   $('#element2').show()</code></p>
  
  <p>I'm not quite understanding how to achieve this with my current layout</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>class EntriesTable extends React.Component {
      constructor(props) {
          super(props);
  
          console.log(this.props.plannerId);
          this.state = { 
              tasks: [],
              plannerId: this.props.plannerId,
          };
  
          var state = this.state;
      }
  
      componentDidMount() {
          this.getTasks(this.state.plannerId);
      }
  
      EditTask(id) {
          console.log(id);
          var spanEl = id + 'taskSpan';
          var inputEl = id + 'taskInput';
          //hide this span
          //show input
          $(spanEl).hide();
          $(inputEl).show();
  
          //when save
  
          //hide input
          //update task
          //show span
      }
  
      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) =&gt; {
              var spanId = task.Id + "taskSpan";
              var inputId = task.Id + "taskInput"; 
              return (
                 &lt;li key={task.Id} className="list-group-item" style={{minHeight: '50px'}}&gt;
                     &lt;div className="pull-left" style={{width: '50%'}}&gt;
                         &lt;span id={spanId} onClick={this.EditTask.bind(this, task.Id) }&gt;{task.Name}&lt;/span&gt;
                         &lt;input id={inputId} type="text" style={{ display: 'none' } } /&gt;
                     &lt;/div&gt;
                     &lt;div className="pull-right" style={{marginTop: '-5px', width: '50%'}}&gt;
                         &lt;div className="pull-right"&gt;
                              &lt;button className="btn btn-default"&gt;Add&lt;/button&gt;
                              &lt;button className="btn btn-default"&gt;Edit&lt;/button&gt;
                          &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/li&gt;
              );
          });
          return (
            &lt;div className="table-wrapper"&gt;
              &lt;div className="task-container"&gt;
                  &lt;h3&gt;{this.props.rowName}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;ul id="tasksContainer"&gt;
                  {tasks}
                  &lt;li className="list-group-item list-group-item-last"&gt;&lt;input type="button" value="Add Task" onClick={this.addTask.bind(this)} className="btn btn-success btn-override" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
  
        );
      }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I did see other SO's which tell you to use a variable and then to show/hide by changing the variable, but I'm not sure if that's doable for my need, since I have a dynamic list it's not just a single element I am trying to show or hide. </p>