使用条件渲染隐藏/显示表中的行 - React

Question

In React I want to hide rows in the table using a value of the vehicle in a conditional rendering. The below code to hide/show row works only when used on a group of elements label and input, or with a select drop-down menu, but doesn't work on table rows.

return (
  <Fragment>
    <h2>Vehicle Details: {vehicle.vehicleId}</h2>

    <table >
      <tbody>

        {vehicle.type = "car" && (
          <Fragment>
            <tr>
              <th>Car</th>
              <td>{vehicle.reg}</td>
            </tr>
          </Fragment>
        )}

        {vehicle.type = "truck" && (
          <Fragment>
            <tr>
              <th>Truck</th>
              <td>{vehicle.reg}</td>
            </tr>
          </Fragment>
        )}

        <tr>
          <th>Bus</th>
          <td>{vehicle.reg}</td>
        </tr>

      </tbody>
    </table>
  </Fragment>
);

Answer 1

You need to use the strict comparison operator === , not the assignment operator = .

 const Table = () => { const [vehicle, setVehicle] = React.useState({ id: "xy", type: "car", reg: "A - 343 - 34"}) return ( <React.Fragment> <h2>Vehicle Details: {vehicle.vehicleId}</h2> <table> <tbody> { (vehicle.type === "car" && ( <tr> <th>Car</th> <td>{vehicle.reg}</td> </tr> )) } { (vehicle.type === "truck" && ( <tr> <th>Truck</th> <td>{vehicle.type}</td> </tr> )) } <tr> <th>Bus</th> <td>{vehicle.bus}</td> </tr> </tbody> </table> </React.Fragment> ); }; ReactDOM.render(<Table/>, document.getElementById('root'));

 <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <div id="root"></div>