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!

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.