Conditional rendering with buttons in React

Question

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 false, 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.

See table Below:

const ConfigComponent = (props) => {
console.log(props.secured)
if (props.secured !== true) {
    return (
    <tr>
        <td>{props.configCategory}</td>
        <td>{props.configValue}</td>
        <td>{props.description}</td>
        <td>{props.configTypeId}</td>
        <td>{props.dataTypeId}</td>
        <td>{props.secured}</td>
        <td>{props.createdDate}</td>
        <td>{props.modifiedDate}</td>
        <td>{props.modifiedBy}</td>
        <td>{props.id}</td>
        <td><button type="button" class="btn btn-sm btn-primary" hidden={!props.secured} onClick={() => props.onClick(props.id)}>Edit</button></td>
        <td><button type="button" class="btn btn-sm btn-danger" hidden={!props.secured} onClick={() => props.onDelete(props.id)}>Delete</button></td> 
    </tr>
    )} 
else {
        return (
        <tr>
            <td>{props.configCategory}</td>
            <td>{props.configValue}</td>
            <td>{props.description}</td>
            <td>{props.configTypeId}</td>
            <td>{props.dataTypeId}</td>
            <td>{props.secured}</td>
            <td>{props.createdDate}</td>
            <td>{props.modifiedDate}</td>
            <td>{props.modifiedBy}</td>
            <td>{props.id}</td>
        </tr>
        )}
}


render() {
    let configList = this.state.configList
    return (
        <React.Fragment>
            <h3 class="font-weight-bold py-3 mb-4">Config List</h3>
            <table className="table">
                <thead>
                    <tr>
                        <th>Config Category</th>
                        <th>Config Value</th>
                        <th>Description</th>
                        <th>ConfigTypeId</th>
                        <th>DataTypeId</th>
                        <th>Secured</th>
                        <th>Created Date</th>
                        <th>Modified Date</th>
                        <th>Modified By</th>
                        <th>ID</th>
                    </tr>
                </thead>
                <tbody>
                    {configList.map((config, i) => {
                        return (
                            <React.Fragment key={i}>
                                <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} />
                            </React.Fragment>
                        )
                    })}
                </tbody>
            </table>
        </React.Fragment>
    )
}

Ji aSH · Accepted Answer · 2018-12-06 07:01:44Z

1

I am not sure to understand what your question is ...

You make a cast to string

secured={(config.secured).toString()}

but then you check for an explicit 'true'

if (props.secured !== true)

I assume this will always return false, removing the cast toString() should bring a better behavior

answered Dec 6, 2018 at 7:01

Ji aSH

3,4841 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

twofer Over a year ago

I was using the cast to string because on the database, that value is stored as a zero or one bit. I converted that bit to a string to display on the page as true or false.

Ji aSH Over a year ago

still '1' is never === true. You should do secured = Boolean(config.secured) to achieve what you want

Shan · Accepted Answer · 2018-12-06 06:15:14Z

0

<td><button type="button" class="btn btn-sm btn-primary" hidden={!props.secured} onClick={() => props.onClick(props.id)}>Edit</button></td>

This line is called only when props.secured !== true, it is inside if condition. That means everytime hidden will be true and it wont change.

answered Dec 6, 2018 at 6:15

Shan

6199 silver badges21 bronze badges

Comments

sandy · Accepted Answer · 2018-12-06 07:16:02Z

Firstly, you don't need the else statement, secondly, I don't see react gives button a "hidden" attribute. You should try -

const ConfigComponent = (props) => { console.log(props.secured)
    return (
    <tr>
        <td>{props.configCategory}</td>
        <td>{props.configValue}</td>
        <td>{props.description}</td>
        <td>{props.configTypeId}</td>
        <td>{props.dataTypeId}</td>
        <td>{props.secured}</td>
        <td>{props.createdDate}</td>
        <td>{props.modifiedDate}</td>
        <td>{props.modifiedBy}</td>
        <td>{props.id}</td> {props.secured === true ?
        <td><button type="button" class="btn btn-sm btn-primary"  onClick={() => props.onClick(props.id)}>Edit</button></td>
        <td><button type="button" class="btn btn-sm btn-danger"  onClick={() => props.onDelete(props.id)}>Delete</button></td> : ""}
    </tr> ) }

MiraTech · Accepted Answer · 2020-11-18 10:09:23Z

May be this answer would help someone in the future, there is no need to use ConfigComponent , please just try:

 <tbody>
    {configList.map((config, i) => {
       <tr>
          <td>{config.configCategory}</td>
          <td>{config.configValue}</td>
          <td>{config.description}</td>
          <td>{config.configTypeId}</td>
          <td>{config.dataTypeId}</td>
          <td>{config.secured}</td>
          <td>{config.createdDate}</td>
          <td>{config.modifiedDate}</td>
          <td>{config.modifiedBy}</td>
          <td>{config.id}</td>
          {config.secured &&
          <>
          <td><button type="button" class="btn btn-sm btn-primary" onClick={() => props.onClick(config.id)}>Edit</button></td>
          <td><button type="button" class="btn btn-sm btn-danger" onClick={() => props.onDelete(config.id)}>Delete</button></td> 
          </>
          }
      </tr>
    })}
 </tbody>

Collectives™ on Stack Overflow

Conditional rendering with buttons in React

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related