Member Avatar for bprosic

Hi all,
I'm having difficulties to pass Props (Label text) to Combobox component. I usually use same forms for adding and editing Data.
When it comes to editing, If I use lot of arrays to iterate first and then pass right information, I get stucked for hours like here.

I'm using react-select component.

Parent:

import React, { useEffect, useState } from 'react';
import Dropdown2 from './Dropdown2';

function App() {
  const [listCategoriesDb] = useState(
      { term_id: '1', cat_name: 'Uncategorized' },
      { term_id: '2', cat_name: 'simple' },
      { term_id: '3', cat_name: 'grouped' },
      { term_id: '4', cat_name: 'variable' },
      { term_id: '5', cat_name: 'external' },
      { term_id: '6', cat_name: 'exclude-from-search' },
      { term_id: '7', cat_name: 'exclude-from-catalog' },
      { term_id: '8', cat_name: 'featured' }
    ),
    [lbl, setLbl] = useState('');

  useEffect(() => {
    if (listCategoriesDb !== null) {
      let a = listCategoriesDb.find((x) => x.term_id === 3);
      if (a !== undefined) {
        setLbl(a.cat_name);
      }
    }
  }, [listCategoriesDb]);

  return (
    <>
      <div>
        <Dropdown2
          listCategoriesDb={listCategoriesDb}
          initialVal={3}
          lbl={lbl} // If I write here manually, then it will be passed to combobox.
        />
      </div>
    </>
  );
}

export default App;

Child:

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

export default function Dropdown2(props) {
  const { listCategories, initialVal, lbl } = props,
    [options] = useState(listCategories),
    // here should lbl be populated, but it's not.
    [data, setData] = useState({
      options: {
        value: initialVal, // this is passed
        label: lbl, // this is not passed
      },
    });

  const handleChange = (e) => {
    setData({ ...data, options: e });
  };

  return (
    <div>
      <Select
        defaultValue={data.options}
        onChange={handleChange}
        options={options}
      />
    </div>
  );
}

Thank you!

  • 2 Contributors
  • 1 Reply
  • 92 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dakota_2

Dani AI

Generated

Quick diagnosis (for ) and why 's reply is not helpful: two separate problems are visible in the code. First, the parent passes listCategoriesDb but the child destructures listCategories — that means the child sees undefined for options. Second, the child initializes local state from props only on mount; lbl is set later in the parent's useEffect, so the child never updates its initial state. Also note that react-select treats defaultValue as a one-time initial value — to reflect later prop changes you must either control the select with a value prop or update the child state when props change (react-select props, React useEffect).

Two practical fixes:

  1. Lift the selected-option state to the parent (make the Select controlled): parent holds the option object and passes it as value to the child; child emits onChange to update the parent. This avoids syncing problems.
  2. If keeping state in the child, add an effect to update that state whenever lbl or initialVal (or the options array) change. For example:
useEffect(() => {
  if (initialVal != null || lbl) {
    setSelected({ value: initialVal, label: lbl });
  }
}, [initialVal, lbl]);

Quick troubleshooting checklist: fix the prop name mismatch, ensure listCategoriesDb is an actual array of option objects, console.log the props inside the child to confirm values, and prefer a controlled value when you need the UI to reflect asynchronous updates.

Member Avatar for Dakota_2

i dunno

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.