Need to Replace the Object key name to another name and Pass down to dropdown list using React

user_9576514 0
Viewed 55

I want to Replace the Object Key name "Value" to "label" and Pass down to DropdownList.. For Example, I am Using "item.value" in the Dropdown Component, But now I need to get the Inputs Data and replace "item.value" to "item.label"... So How Can I change that Object Key name and render the List in DropDown Can Anyone help in this, Thanks in Advance

export const inputs = {
    "purpose": [
         {
            "locale": "er",
             "code": "zzz",
             "value": "Payment"
         },
         {
            "locale": "po",
             "code": "dgf",
             "value": "Support"
         },
         {
            "locale": "fg",
             "code": "oiuy",
             "value": "yes Worked"
         },

Here is the Dropdown

const Dropdown = () => {
    const data = inputs;
    //console.log(data.purpose);
    return (
                <select >
                    <option>Select an Option</option>
                    {data.purpose.map((items)=>(
                           //console.log(items.value);
                           <option>{items.value}</option>
                    ))}
                </select>
            </div>
        </div>
    )
}

export default Dropdown
react-hooks reactjs javascript
2 Answers

You can make a copy of the array with new keys by mapping through it as:

const transformed = inputs.purpose.map(({ locale, code , value }) => ({ label: value, locale: locale, code : code}));
user_84177830

easy way :

const new=inputs.purpose.map(i=>{
    const temp={};
    temp.locale=i.locale;
    temp.code=i.code;
    temp.label=i.value;
    return temp;
    })
user_44342740
Related