Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React problem with select and default value on json array

This is my code.

import React from 'react';

// Assuming this is your JSON array
const jsonArray = [
  { key: 'key1', value: 'value1' },
  { key: 'key2', value: 'value2' },
  { key: 'key3', value: 'value3' },
  // add more objects as needed
];

class MyComponent extends React.Component {
  render() {
    return (
      <select>
        {jsonArray.map((item, index) => (
          <option key={index} value={item.value}>
            {item.key}
          </option>
        ))}
      </select>
    );
  }
}

export default MyComponent;

I want to select value2 as defaultValue from a variable.

I tried with keyword value but the select dropdown not working more. It remains fix on the value.
With defaultValue I don’t know how implement it. I don’t know if it is needed the key, the value or both. I don’t know also if defaultValue is near select or in option tag.

Tags:

3

Answers


  1. 0

    Since the value key is chosen to represent the value of each option, then defaultValue should also correspond to one of the value keys, in your case:

    <select defaultValue="value2">
    Login or Signup to reply.
  2. 0

    If you are using react-select you need to pass the object for select component as defaultValue

    import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

export function App() {
  const [selectedOption, setSelectedOption] = useState({ value: 'strawberry', label: 'Strawberry' });

  return (
    <div className="App">
      <Select
        defaultValue={selectedOption}
        onChange={setSelectedOption}
        options={options}
      />
    </div>
  );
}

    if you are using JSX select pass the value into it

    export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit" defaultValue="orange">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}

    In your case it’s just as bellow

    <select defaultValue="value3">
        {jsonArray.map((item, index) => (
          <option key={index} value={item.value}>
            {item.key}
          </option>
        ))}
 </select>
    Login or Signup to reply.
  3. 0

    You can memoize the default value like this:

    const defaultValue = useMemo(
  () => options.find((item) => item.default)?.value,
  [options]
);

    Just make sure to add a "default": true property to your JSON data.

    const { useMemo } = React;

const jsonArray = [
  { "key": "key1", "value": "value1" },
  { "key": "key2", "value": "value2", "default": true },
  { "key": "key3", "value": "value3" },
];

const MyComponent = (props) => {
  const { options, onChange } = props;
  const defaultValue = useMemo(() =>
      options.find((item) => item.default).value,
    [options]);
  return (
    <select defaultValue={defaultValue} onChange={onChange}>
      {options.map((item, index) => (
        <option key={index} value={item.value}>
          {item.key}
        </option>
      ))}
    </select>
  );
};

const App = () => {
  const onChange = (event) => {
    console.log(event.target.value);
  };
  return (
    <div className="App">
      <MyComponent options={jsonArray} onChange={onChange} />
    </div>
  );
};

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search