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>
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>
);
}
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>
);
}