title: Conditional rendering with buttons in React
body: <p>been working with React for a few weeks and I'm trying to get conditional rendering to work. I'm working with a table with a few rows, where each row has a 'edit' and 'delete' button. On the 'Secured' column, where the values are <strong>false</strong>, I would like to have both buttons to not display. I have tried to render the buttons to be hidden and with some logic, the buttons would display if the props were not false. I'm using the ConfigComponent on another piece of code where I'm displaying all of the table values. </p>
  
  <p><strong>See table Below:</strong></p>
  
  <pre><code>const ConfigComponent = (props) =&gt; {
  console.log(props.secured)
  if (props.secured !== true) {
      return (
      &lt;tr&gt;
          &lt;td&gt;{props.configCategory}&lt;/td&gt;
          &lt;td&gt;{props.configValue}&lt;/td&gt;
          &lt;td&gt;{props.description}&lt;/td&gt;
          &lt;td&gt;{props.configTypeId}&lt;/td&gt;
          &lt;td&gt;{props.dataTypeId}&lt;/td&gt;
          &lt;td&gt;{props.secured}&lt;/td&gt;
          &lt;td&gt;{props.createdDate}&lt;/td&gt;
          &lt;td&gt;{props.modifiedDate}&lt;/td&gt;
          &lt;td&gt;{props.modifiedBy}&lt;/td&gt;
          &lt;td&gt;{props.id}&lt;/td&gt;
          &lt;td&gt;&lt;button type="button" class="btn btn-sm btn-primary" hidden={!props.secured} onClick={() =&gt; props.onClick(props.id)}&gt;Edit&lt;/button&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button type="button" class="btn btn-sm btn-danger" hidden={!props.secured} onClick={() =&gt; props.onDelete(props.id)}&gt;Delete&lt;/button&gt;&lt;/td&gt; 
      &lt;/tr&gt;
      )} 
  else {
          return (
          &lt;tr&gt;
              &lt;td&gt;{props.configCategory}&lt;/td&gt;
              &lt;td&gt;{props.configValue}&lt;/td&gt;
              &lt;td&gt;{props.description}&lt;/td&gt;
              &lt;td&gt;{props.configTypeId}&lt;/td&gt;
              &lt;td&gt;{props.dataTypeId}&lt;/td&gt;
              &lt;td&gt;{props.secured}&lt;/td&gt;
              &lt;td&gt;{props.createdDate}&lt;/td&gt;
              &lt;td&gt;{props.modifiedDate}&lt;/td&gt;
              &lt;td&gt;{props.modifiedBy}&lt;/td&gt;
              &lt;td&gt;{props.id}&lt;/td&gt;
          &lt;/tr&gt;
          )}
  }
  
  
  render() {
      let configList = this.state.configList
      return (
          &lt;React.Fragment&gt;
              &lt;h3 class="font-weight-bold py-3 mb-4"&gt;Config List&lt;/h3&gt;
              &lt;table className="table"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Config Category&lt;/th&gt;
                          &lt;th&gt;Config Value&lt;/th&gt;
                          &lt;th&gt;Description&lt;/th&gt;
                          &lt;th&gt;ConfigTypeId&lt;/th&gt;
                          &lt;th&gt;DataTypeId&lt;/th&gt;
                          &lt;th&gt;Secured&lt;/th&gt;
                          &lt;th&gt;Created Date&lt;/th&gt;
                          &lt;th&gt;Modified Date&lt;/th&gt;
                          &lt;th&gt;Modified By&lt;/th&gt;
                          &lt;th&gt;ID&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {configList.map((config, i) =&gt; {
                          return (
                              &lt;React.Fragment key={i}&gt;
                                  &lt;ConfigComponent
                                      key={config.id}
                                      id={config.id}
                                      configCategory={config.configCategory}
                                      configValue={config.configValue}
                                      description={config.description}
                                      configTypeId={config.configTypeId}
                                      dataTypeId={config.dataTypeId}
                                      secured={(config.secured).toString()}
                                      createdDate={moment(config.createdDate).format("YYYY-MM-DD")}
                                      modifiedDate={moment(config.modifiedDate).format("YYYY-MM-DD")}
                                      modifiedBy={config.modifiedBy}
                                      onClick={this.editClick}
                                      onDelete={this.deleteClick} /&gt;
                              &lt;/React.Fragment&gt;
                          )
                      })}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/React.Fragment&gt;
      )
  }
  </code></pre>