Estoy tratando de convertir el párrafo en entradas para que los usuarios editen su información. Básicamente, cuando el usuario hace clic en un botón, los párrafos se convierten en entradas. Me gustaría hacer esto en un componente separado si es posible. Esto es lo que tengo hasta ahora:
import React, { useState, useEffect } from "react"; import EditUser from "./EditUser"; const UserList = () => { const [userApi, setUserApi] = useState([]); const [getData, setGetData] = useState([]); useEffect(() => { fetch("http://user/api/getEndpoint") .then((getData) => getData.json()) .then((json_result) => { setGetData(json_result.results); let userApi = showData(json_result.results); setUserApi(userApi); }); }, []); const showData = (getData) => { return getData.map((item, key) => { return ( <div className="body"> <div key={key}> <img className="circle" src={item.picture.large} alt="" /> <div className="list"> <h5 className="title"> {item.name.first} {item.name.last} </h5> <p className="text">{item.email}</p> <p className="text">{item.phone}</p> <p className="text"> {item.location.city}, {item.location.state} </p> </div> <hr /> <div> <EditUser /> //Import other component as a button to edit changes for the paragraphs above. </div> </div> </div> ); }); }; export default UserList;Y poder editar el párrafo en este componente:
import React, { useState, useEffect } from "react"; function EditUser() { const [user, editUser] = useState([]); return ( <div> <button className="button" onClick={() => editUser([])} //Convert paragraph from userList to inputs for editing. > Edit User </button> </div> ); } export default EditUser;¡Gracias por la ayuda!
Por lo que entiendo tu pregunta, puedes hacer algo como esto https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/clickInput.js
items y setItems en el componente principal. function changeItem(i, value) { //index to be updated and value let newItems = [...items]; newItems[i] = value; setItems(newItems); } function List({ items, setItem }) { return ( <> {items?.map((itm, i) => ( <Label key={i} title={itm} onChange={(e) => setItem(i, e.target.value)} //pass the index and value of the edited index to be saved /> ))} </> ); }edit , que se activa al hacer clic. function Label({ title, onChange }) { const [edit, setEdit] = useState(false); return ( <div> {!edit ? ( <span onClick={() => setEdit(true)}>{title}</span> //onclick to start edit ) : ( <> <input autoFocus value={title} onChange={onChange} /> //input to edit <button onClick={() => setEdit(false)}>Save</button> //this is to toggle edit </> )} </div> ); }