Reactjs reusable components using same data and onclick function

Question

I am trying to implement reusable component where data will be removed on the click function of the specific component.

But on click of one components removes the other component's data since I am using same data for reusable components. Is there a better way to do this?

my app.js file

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;

my list.js file

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;

Answer 1

My suggestion will be as follows:

• Once you pass data to the child components, mantain them as local state then clear the data on that components local state. ie

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;

On the child/Shortlist Component:

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;

Answer 2

You cannot make this line twice:

<ShotList data={data} removeData={removeData}></ShotList>
<ShotList data={data} removeData={removeData}></ShotList>

because it will render your data twice and because of that elements inside .map would have the same key so removing one of them will remove also all that have the same key value.

If you want to have more elements just add new ones inside data state like:

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
    }
 ]);