vendredi 11 février 2022

How to display checkbox field name by fetching name from JSON object with React Code using material UI

JSON Response

JSON = [
{
"type": "checkbox",
"display": "OOS in water/to be rejected",
"key": "key2",
"value": "val1"
},
{
"type": "checkbox",
"display": "PMT micro pending",
"key": "key3",
"value": "val1"
},
{
"type": "checkbox",
"display": "Weight match confirmed",
"key": "key4",
"value": "val1"
},
{
"type": "input",
"display": "Comment",
"key": "key5",
"value": "val1"
},
{
"type": "button",
"display": "Submit",
"key": "key6",
"value": [
{
"type": "button",
"display": "OK",
"key": "key7",
"value": 'val3'
}
]
}
]

RenderCard.js Code

import { Button,Grid,Checkbox,TextField,Switch,Link, Input } from '@mui/material';
const KeysToComponentMap = {

grid: Grid,
button: Button,
checkbox: Checkbox,
input: TextField,
switch: Switch,
link: Link,
input: Input   
};



return (
{JSON.map((item, index) => {
                    console.log(item.type);
                    if (typeof KeysToComponentMap[item.type] !== "undefined") {        
                            return (
                                React.createElement(
                                    KeysToComponentMap[item.type],
                                    {
                                        onClick: () => { onButtonHandler(item, item.key) },
                                        variant: "contained"                                      
                                    },
                                    item.display &&
                                    (typeof item.display === "string"
                                    && item.display
                                    )
                                ))   
                    }
                })}
)

Output of this code displays checkbox and button correctly but Name is only displayed for button , not for the checkbox

Actual result of this code shown in the screenshot

Expected Result should be along with checkbox , check box name should display [for ex : "OOS in water/to be rejected" from the JSON("display": "OOS in water/to be rejected",) ]enter image description here

Can you please help me with this.




Aucun commentaire:

Enregistrer un commentaire