How to get value of their object in react hooks array?

Question

Good afternoon, I rarely write here. But now I really can't understand.

I am using React Select to display select. In the onChange attribute, I pass a function that forms the object and writes it to UseStat. But then I try to find an object using the find and take an array of values from it.

const [selectedSpecificationValues, setSelectedSpecificationValues] = useState([])

const setSelectedSpecificationValuesHandler = (e, s) => {
    const maybeSelectedSpecification = selectedSpecificationValues.find(
        ss => ss._id === s._id
    )

    const objForWrite = {
        _id: s._id,
        name: s.name,
        values: e,
    }

    if (maybeSelectedSpecification) {
        const index = selectedSpecificationValues.indexOf(
            maybeSelectedSpecification
        )
        let newArr = [...selectedSpecificationValues]
        newArr[index] = objForWrite

        setSelectedSpecificationValues(newArr)
    } else {
        setSelectedSpecificationValues([
            ...selectedSpecificationValues,
            objForWrite,
        ])
    }
}

const ssTestVal = Id => {
    let result = []
    if (selectedSpecificationValues.length > 0) {
        const foundItem = selectedSpecificationValues.find(i => i._id === Id)
        console.log(Id, foundItem)
        if (foundItem) {
            result = foundItem.values
        }
    }
    return result
}

/* specifications = [
    {
        values: [
            {
                value: 0,
                label: '480 min',
            },
            {
                value: 1,
                label: '120 min',
            },
        ],
        _id: '5fe74eae07905e53ebf263ec',
        name: 'Duration',
        slug: 'duration',
        createdAt: '2020-12-26T14:54:38.362Z',
        updatedAt: '2020-12-29T08:37:18.962Z',
        __v: 1,
    },
    {
        values: [
            {
                value: 0,
                label: 'Photobook',
            },
            {
                value: 1,
                label: 'Photocard',
            },
            {
                value: 2,
                label: 'Album',
            },
            {
                value: 3,
                label: 'DVD',
            },
            {
                value: 4,
                label: 'Stickers',
            },
            {
                value: 5,
                label: 'CD',
            },
        ],
        _id: '5fe74e9107905e53ebf263eb',
        name: 'Includes',
        slug: 'includes',
        createdAt: '2020-12-26T14:54:09.267Z',
        updatedAt: '2020-12-26T16:10:16.283Z',
        __v: 9,
    },
] */

{
    specifications &&
        specifications.map((s, idx) => (
            <Select
                classNamePrefix='select2-selection'
                options={s.values}
                value={() => ssTestVal(s._id)}
                onChange={e => setSelectedSpecificationValuesHandler(e, s)}
                isMulti
            />
        ))
}

It is also important to understand that I loop a lot of selections in order to select different characteristics and their values.

I will be glad to help!

https://codesandbox.io/s/serverless-night-kez18?file=/src/App.js

Answer 1

Looks like minor issue with how you were computing the value for the sub-select inputs. You were defining it as though it were a callback.

<Select
  classNamePrefix="select2-selection"
  options={s.values}
  value={() => ssTestVal(s._id)} // <-- not correct, not a callabck
  onChange={(e) => setSelectedSpecificationValuesHandler(e, s)}
  isMulti
/>

It should just be immediately invoked to compute and return an input's value.

<Select
  classNamePrefix="select2-selection"
  options={s.values}
  value={ssTestVal(s._id)} // <-- invoke immediately for return value
  onChange={(e) => setSelectedSpecificationValuesHandler(e, s)}
  isMulti
/>