Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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}));
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading