JSX passing an object to the value of a jsx tag in React

user_14237427 0
Viewed 377

I'm trying to pass an object to a value of an jsx tag in react

  • I set the value of tag option to an object

  • onChange i got the value in tag <Form.Select> and set the local state with the value

  • I console logged the local state but it returned [object Object]

  • I did JSON.stringify on it this way:

    console.log(JSON.strigify(obj))

    It returned : "[object Object]"

what am I doing wrong?

here is the state of the react component:

const [selectedOp, setSelectedOp] = useState()

here is the console.log:

console.log(selectedOp)
console.log(JSON.stringify(selectedOp))

and this is the html code:

<Form.Select onChange={e => setSelectedOp(e.target.value)} className='b' style={{ display: 
    'inline-block' }} size="lg" aria-label="Default select example">
     <option>Click to choose message</option>
     {mainNotifications.map((n, i) =>
     <option key={i} name="selectMessage" value={{message:n.message,type:n.type}}>hey this is an option tag </option>
     )}
</Form.Select>
jsx reactjs html javascript
2 Answers
value={{message:n.message,type:n.type}}

You cannot set objects as values, this will make the value itself be a string of [object Object], which is what you see(when you stringify your state, it was already [object Object] before), you can store a index or identifier value, and search in an array for the object, if you want to JSON stringify it, it would have to be done on the value of the options as well

const mainNotifications = [
  { message: "my msg", type: 1 },
  { message: "my msg 2", type: 3 }
];

export default function App() {
  const [selectedOp, setSelectedOp] = React.useState(null);
  const onChange = (e) => {
    setSelectedOp(
      mainNotifications.find((_, i) => e.target.value === i.toString())
    );
  };

  React.useEffect(() => {
    console.log(selectedOp);
  }, [selectedOp]);

  return (
    <select onChange={onChange}>
      <option>Click to choose message</option>
      {mainNotifications.map((n, i) => (
        <option key={i} name="selectMessage" value={i}>
          {n.message}
        </option>
      ))}
    </select>
  );
}

https://codesandbox.io/s/red-resonance-iyrnb

user_167324600

your value is a string type, not an object otherwise it prints as [object, object] so you need to stringify your object value

value=JSON.stringify({message:n.message,type:n.type})

check the example below

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [val, setVal] = useState();

  const changeHandler =value => {
    console.log(value);
    setVal(value);
  
  };

  return (
    <div>
      <select onChange={e => changeHandler(e.target.value)}>
        <option value={JSON.stringify({value: 'one', type: 'number' })} >none</option>
        <option value={JSON.stringify({value: 'one', type: 'number' })}>one</option>
      </select>
      {val&&console.log(JSON.parse(val))}
    </div>
  );
}
user_120111750
Related