CODEWITHSUNDEEP
javascripthtmlreactjsjsx
Mindy
Mindy

Reputation: 121

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

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

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>

Upvotes: 3

Views: 1247

Answers (2)

iunfixit
iunfixit

Reputation: 994

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

Upvotes: 1

Baskaran Ajiharan
Baskaran Ajiharan

Reputation: 508

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

Upvotes: 1

Related Questions