Send object in value attribute with react

Question

I need to be able to send two values when handling an onChange event in my select box however I am not sure a way of doing this as they are currently sent as a string. I am using react with react-bootstrap.

 const DropDown = () => {
     
    const handleOnchange = (event) => { 

      console.log(event.target.value)
      
        const filter = event.target.value[0];
        const initialState = [...initialValues]
        let result = [];

      console.log(event)

        setDefaultSelect(event.target.name)

        if(event.target.value === 'Show All') {
            setValues(initialState);
        }
        else {  
            initialState.forEach(item => {
                let found = item.store_category.filter(item => item == filter);
                if (found.length) {
                    result.push(item);
                }
            });
            setValues(result);
        }
    }

    return (
      <Form>
        <Form.Group controlId="exampleForm.SelectCustom">
          <Form.Control onChange={(e) => handleOnchange(e)} as="select" custom>
          <option className="pl-2" hidden>{defaultSelect}</option>
            <option>Show All</option>
            {storeCategorys.map((item, index) => (
              <option value={{itemId: item.id, itemName: item.name}} key={index}>{item.name}</option>
            ))}
          </Form.Control>
        </Form.Group>
      </Form>
    );
  }

Are `itemId` and `itemName` the two values? If so, to where are you sending them? — ghchoi, Feb 03 '21 at 16:14
yes and i have updated the original question with the full code block — ashley g, Feb 03 '21 at 16:21

score 1 · Answer 1 · answered Feb 03 '21 at 16:42

How about to use useEffect instead of handleOnchange?

const DropDown = () => {
    const [selectedItem, setSelectedItem] = useState({});
    
    useEffect(() => {
      console.log(selectedItem);
    }, [selectedItem]);  // will be fired when `selectedItem` is changes

    ...

            {storeCategorys.map((item, index) => (
              <option
                value={{itemId: item.id, itemName: item.name}} 
                key={index}
                onClick={() => {setSelectedItem(item)}}  // will fire `useEffect`
                                                         // on `selectedItem`
              >{item.name}</option>
            ))}

    ...

}

Send object in value attribute with react

1 Answers1