Estoy tratando de pasar un objeto a un valor de una etiqueta jsx en reaccionar
Establecí el valor de la opción de etiqueta en un objeto
onChange obtuve el valor en la etiqueta <Form.Select> y establecí el estado local con el valor
La consola registró el estado local pero devolvió [objeto Objeto]
Hice JSON.stringify de esta manera:
console.log(JSON.strigify(obj))
Devolvió: "[objeto Objeto]"
¿Qué estoy haciendo mal?
Aquí está el estado del componente de reacción:
const [selectedOp, setSelectedOp] = useState()aquí está el archivo console.log:
console.log(selectedOp) console.log(JSON.stringify(selectedOp))y este es el codigo html:
<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>su valor es un tipo de cadena, no un objeto; de lo contrario, se imprime como [objeto, objeto], por lo que debe especificar el valor de su objeto
value=JSON.stringify({message:n.message,type:n.type})revisa el ejemplo a continuación
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}}No puede establecer objetos como valores, esto hará que el valor en sí sea una cadena de [objeto Objeto], que es lo que ve (cuando clasifica su estado, ya era [objeto Objeto] antes), puede almacenar un índice o valor del identificador, y busque en una matriz el objeto, si desea que JSON lo encadene, también tendría que hacerlo en el valor de las opciones
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> ); }