React Pass the ID of clicked Element to another Component-CodePudding

My App.js have this structure.

 return (
<Container fluid="true" className="h-100">
  <Header />
  <Row className="contentRow">
    <CustomerList />
    <DetailPage />
  </Row>
</Container>
);

There are many elements in CustomerList. With a click I want to send the ID of the element to DetailPage and display the details of the associated element. But I am still quite new in react and don't really know how to pass the data. Or if I even need to change something in the structure of the components.

CodePudding user response：

You need to define a new state variable in your component.

Then please pass it with the setter function into CustomerList.

Define state variable.

const [id, setId] = useState(null);

Then pass setter function into <CustomerList />

<CustomerList setId={setId} />

// on CustomerList click event

const onClick = (event) => {
   // your logic and use setId from props.
   // This is just an example.
   props.setId(event.target.value);
}

Finally, pass id state variable into <DetailPage /> so that your DetailPage component uses in its props.

<DetailPage id={id} />

Usage in Detailpage:

const DetailPage = (props) => {
   const id = props.id;
   // use id for your purpose.
}

CodePudding user response：

You can use the event.target.id property. add an onclick function:

onClick={(e) => handleClick(e)}

handleClick = (e) => {
   //access e.target.id here
}

CodePudding user response：

See if this help you:

import React, { useState } from "react";

const Header = () => <div />;

const CustomerList = ({ onChange }) => (
  <ul>
    {["item1", "item2", "item3", "item4"].map((item) => (
      <li onClick={() => onChange(item)} key={item}>
        {item}
      </li>
    ))}
  </ul>
);

const DetailPage = ({ selectedItem }) => <div>{selectedItem}</div>;

const Component = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleChange = (item) => {
    setSelectedItem(item);
  };

  return (
    <div> {/* Container */}
      <Header />
      <div className="contentRow"> {/* Row */}
        <CustomerList onChange={handleChange} />
        <DetailPage selectedItem={selectedItem} />
      </div>
    </div>
  );
};

When you click some item, we set the state in parent component, and then send to DetailPage, in DetailPage, you can use this selectedItem to show the info.You also can replace ["item1", "item2", "item3", "item4"] with an array of objects.

CodePudding user response：

App.js

import "./styles.css";
import React, { useState } from "react";
import CustomersList from "./CustomersList";
import { DetailPage } from "./DetailPage";
export default function App() {
const [listOfElements, setListOfElements] = useState([
{ name: "abc", id: "0" },
{ name: "def", id: "1" },
{ name: "ghi", id: "2" },
{ name: "jkl", id: "3" },
{ name: "mno", id: "4" }
]);
const [selectedId, setSelectedId] = useState(1);
const [customerDEatiledinfo, setCuatomerDetailedInfo] = useState({
name: "sample"
});
const idSelectedHandler = (id) => {
const idd =  id;
const newState = listOfElements[idd];
setCuatomerDetailedInfo(newState);
};
 return (
<div className="App">
  <CustomersList customers={listOfElements} selectId={idSelectedHandler} />
  <DetailPage customer={customerDEatiledinfo} />
</div>
);
}

CustomersList.js

export const CustomersList = (props) => {
const onClickHandler = (id) => {
props.selectId(id);
};
return (
<div>
  {props.customers.map((customer) => {
    return (
      <div key={customer.id} onClick={()=>onClickHandler(customer.id)}>
        {customer.name}
      </div>
    );
  })}
   </div>
 );
};
export default CustomersList;

DeatilPage.js

export const DetailPage = (props) => {



return <div style={{ color: "blue" }}>
<br/>
DetailPage

<p>{props.customer.name}</p></div>;
};