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!