Why doesnt the value is passed to Select component using react and javascript?

Question

i have a component child that is used in create and edit mode. it has select menu that displays no value until user selects an option from select menu in create mode.

in edit mode, this select menu should show the previously selected option.

below is my code,

const Child = (mode: mode, formikBag: formikBag) => {
    const handleValue = (field) => {
        if (mode === 'edit') {
            const selectedId = formikBag.values[itemId];
            const selectedItems = allItems.filter((item) => item.id === 
            itemId;
            return selectedItem[0].name;
        }
        return allItems.filter((option) => option.value === field.value); 
        //should be returned in create mode
    return(
        <Select
            value={handleValue}
        />
    );
}

the above code doesnt show any value in edit or create mode. not sure what is going wrong. i am new to react.

could someone help me with this. thanks.

did you tried value={() => handleValue('fieldName')} ?

Dominik Matis
– Dominik Matis

2021-02-01 07:39:11 +00:00
Commented Feb 1, 2021 at 7:39 — Dominik Matis
– Dominik Matis, Commented Feb 1, 2021 at 7:39

ttt · Accepted Answer · 2021-02-01 07:44:31Z

2

handleValue is a function, you need to execute it in order to get the return for passing down

<Select value={() => handleValue(yourFieldHere)} />

If Select is the component you write, you can call the function inside Select

//In Select.js

//{value} means deconstruct that specific props passed from the parent, which name is 'value'. In this case, you have passed the handleValue through value. Therefore, you can use that function in the Select component
const Select = ({value}) => {
    const selectValue = value(yourFieldName)

    console.log(selectValue)
    return (
       <div>
         //some content
       </div>
    )
}

export default Select

edited Feb 1, 2021 at 7:44

answered Feb 1, 2021 at 7:39

ttt

1,8091 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

stackuser Over a year ago

thanks for some reason it is not executing the method handleValue. i have some log statements once it starts executing handleValue. it doesnt log them

ttt Over a year ago

@stackuser Which way are you using? Executing the function on Select or inside Select ??

stackuser Over a year ago

executing function inside select

ttt Over a year ago

When you executing inside Select, you still need to pass your function from the parent. How did you passed the function down to Select?

stackuser Over a year ago

i see that the select component takes value of form { label: 'something', value: 'value',}

Collectives™ on Stack Overflow

Why doesnt the value is passed to Select component using react and javascript?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related