Tengo JSON que se ve así:
{ "Id": 1, "Title": "Data about John Doe", "Comments": "Some text goes here", "UpdatedBy": "John Doe", "UpdateDate": "Apr 14 2022 12:00AM" }Quiero asignar este JSON a MUI TextFields con los nombres de los pares de nombre/valor como etiquetas de TextField y los valores como valores de TextField. También necesito poder editar los valores.
Esta es mi matriz de datos:
const [singleSizing, setSingleSizing] = useState(""); const fetchSizingData = async (intake_id, sizing_id) => { setSingleSizing( await fetch(`/api/fiscalyears/FY2023/intakes/${params.id}/details/questions`).then((response) => response.json() ) ); };Estos son los campos de texto que estoy usando:
<TextField value={} label={} />Suponiendo que singleSizing es un objeto JSON. Si no, mapea primero:
Puede usar Object.entries para extraer el par clave/valor del objeto y luego .map() sobre las entradas para crear los componentes.
// ... return Object.entries(singleSizing).map(sizingEntry => { const [label, value] = sizingEntry; // eg ['Title', 'Data about John Doe'] return <TextField label={label} value={value} /> }); // ...Para editar los valores, busque en los componentes de un formulario MUI u otra biblioteca de formularios y considere cambiar la forma del estado para facilitar las actualizaciones.
Puedes usar .map y Object.keys
{ Object.key(singleSizing).map(key => ( <TextField value = { obj[key] } label = { key } /> )) }