Solution 1 :

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


check the example below

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

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

  const changeHandler =value => {

  return (
      <select onChange={e => changeHandler(}>
        <option value={JSON.stringify({value: 'one', type: 'number' })} >none</option>
        <option value={JSON.stringify({value: 'one', type: 'number' })}>one</option>

Solution 2 :


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) => {
      mainNotifications.find((_, i) => === i.toString())

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

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

Problem :

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:


    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:


and this is the html code:

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


Comment posted by Mindy

thanks for your response ! your solution returns {“value”:”one”,”type”:”number”} which looks good , but I’m not managing to access the value of the object? when I do val.value like in your example it returns undefined,

Comment posted by Baskaran Ajiharan

if you want get val.value you need to parse the string value JSON.parse(val).value

Comment posted by Mindy

how do i do that? do i need to parse the whole object back ?

Comment posted by Baskaran Ajiharan

yes, JSON.stringify is used to stringify an object as a string then if you want to get it back as the object you need to parse it

Comment posted by Mindy

hey thanks for your reply! could you show how to do it in a good way?

Comment posted by iunfixit

@Mindy I provided an example, you would need to change it according to your code, would be great to associate an ID with the notifications when they are created as well

Comment posted by Mindy

Thank you ! I’ll check it out.