I want to get value present in "Location ID" when i change the "Location Status" from Active to Inactive or vice versa.

Sample Image

My react code :

{
    (locationDetail.length > 0 && locationDetail[0].location_name) ? locationDetail.map((value, key) => (
        <tr>
            <th scope="row" key={key} >{key   1}</th>
            <td>{value.location_name}</td>
            <td>{value.location_id}</td>
            <td>{value.country}</td>
            <td>{value.state}</td>
            <td>{value.city}</td>
            <td>{value.airport_code}</td>
            <td>
                <select >
                    {value.is_active ? (
                        <>
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                        </>
                    ) :
                        (
                            <>
                                <option value="active" selected>Inactive</option>
                                <option value="inactive">Active</option>
                            </>
                        )}

                </select>
            </td>
        </tr>

    )) : ""
}

Thanks in advance !!

CodePudding user response：

Add on change event to select and pass location id to that function.

<select  onChange={()=>handleLocationStatusChange(value.location_id)}>
    {value.is_active ? (
        <>
            <option value="active" selected>Active</option>
            <option value="inactive">Inactive</option>
        </>
    ) :
        (
            <>
                <option value="active" selected>Inactive</option>
                <option value="inactive">Active</option>
            </>
        )}

</select>

CodePudding user response：

I don't see that you have onChange handler on <select>, but if you want to handle or toggle values, you can do it like this

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

and then

<Dropdown options={options} />

CodePudding user response：

You can simply add an onChange handler with select

<tr>
        <th scope="row" key={key} >{key   1}</th>
        <td>{value.location_id}</td>
<td>
                <select  onChange={() => console.log(value.location_id)}>
                    {value.is_active ? (
                        <>
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                        </>
                    ) :
                        (
                            <>
                                <option value="active" selected>Inactive</option>
                                <option value="inactive">Active</option>
                            </>
                        )}

                </select>
            </td>
        </tr>

CodePudding user response：

Building ontop of @More's answer an easier approach is with ternary operators.

<select  onChange={()=>handleLocationStatusChange(value.location_id)}>
   <option value="active" selected>{value.is_active ? "Active" : "Inactive"}</option>
   <option value="inactive">{value.is_active ? "Inactive" : "Active"}</option>
</select>