Estoy tratando de implementar un componente reutilizable donde los datos se eliminarán en la función de clic del componente específico.
Pero al hacer clic en uno de los componentes, se eliminan los datos del otro componente, ya que estoy usando los mismos datos para componentes reutilizables. ¿Hay una mejor manera de hacer esto?
mi archivo app.js
import React from 'react'; import './App.css'; import ShotList from "./List" function App() { const [data,setData] = React.useState([ { name1:"asdsad", key: 0 }, { name1:"asdrsad", key: 1 }, { name1:"asdrsad", key: 2 } ]); const removeData = (index) => { setData(data.filter((value) => value.key !== index)) } return ( <div className="App"> <ShotList data={data} removeData={removeData}></ShotList> <ShotList data={data} removeData={removeData}></ShotList> </div> ); } export default App;mi archivo list.js
import React from "react"; const ShotList = (data) => { console.log(data) return ( <> {data.data.map((value,key) => ( <p onClick={() => {console.log(key);data.removeData(key)}} key={key}>{value.name1}</p> ))} <p>123</p> </> ); }; export default ShotList;Mi sugerencia será la siguiente:
import React from 'react'; import './App.css'; import ShotList from "./List" function App() { const [data,setData] = React.useState([ { name1:"asdsad", key: 0 }, { name1:"asdrsad", key: 1 }, { name1:"asdrsad", key: 2 } ]); return ( <div className="App"> <ShotList data={data}></ShotList> <ShotList data={data}></ShotList> </div> ); } export default App;En el componente secundario/lista corta:
import React from "react"; const ShotList = (data) => { const [localData, setLocalData] = useState(data) const removeData = (index) => { setLocalData(localData.filter((value) => value.key !== index)) } return ( <> {localData.map((value,key) => ( <p onClick={() => {console.log(key);removeData(key)}} key={key}>{value.name1}</p> ))} <p>123</p> </> ); }; export default ShotList;No puedes hacer esta línea dos veces:
<ShotList data={data} removeData={removeData}></ShotList> <ShotList data={data} removeData={removeData}></ShotList> porque generará sus data dos veces y debido a que los elementos dentro de .map tendrían la misma key , por lo que eliminar uno de ellos eliminará también todos los que tengan el mismo valor de key .
Si desea tener más elementos, simplemente agregue nuevos dentro del estado data como:
const [data,setData] = React.useState([ { name1:"asdsad", key: 0 }, { name1:"asdrsad", key: 1 }, { name1:"asdrsad", key: 2 }, { name1:"new one", key: 3 }, { name1:"fourth one", key: 4 }, { name1:"fifth one", key: 5 } ]);