Passing props to child component from two different Parents

user_9090626 0
Viewed 57

I'm new to react, and I'm trying to figure out how to implement the following. Goal is to pass the following props from parent to child

Parent Component: Supermarket
Child Component: Modal
Props: show,onHide,supermarketid

Parent Component: SupermarketMembers
Child Component: Modal
Props: memberNames

Parent Component:Modal
Child Component:SupermarketMembers
Props: supermarketid

Let me tell you a bit about my implementation:

I have a Component called Supermarket that basically consists of buttons of all the available Supermarkets in a city. When one of the Supermarket Buttons is clicked, this component calls another Modal Component with a few props like so

      <Modal
        show={modalShow}
        onHide={() => setModalShow(false)}
        supermarketid = {supermarketid}
      />

All up until this point, everything works smoothly and when I click the button a Modal gets rendered.

In the Modal component, I have a form with a drop-down menu which I want to fill with all the names of the people working in that supermarket with an Axios Post response.

So, I created a third component called SupermarketMembers that returns the members in the supermarket and when I console.log(memberNames) inside the SupermarketMembers Components, values are displayed Correctly. But the problem is I can't seem to pass the memberNames state to the Modal Component. It is undefined there.

The SupermarketMembers Component

function SupermarketMembers() {
  const [memberNames, setMemberNames] = useState([]);
  const token = localStorage.getItem("Token");
  useEffect(() => {
    axios
      .post(
        "/viewMemberInSupermarket",
        {
          supermarketid: 1,  //display statically for now till I know how to pass it
        },
        {
          headers: {
            "auth-token": token,
          },
        }
      )
      .then((response) => {
        let tempArr = [];
        response.data.forEach((element) => {
          tempArr.push(element.member.name);
        });

        setMemberNames(tempArr);
        console.log(memberNames) //displays array correctly
        <Modal memberNames={memberNames} />; //trying to pass memberNames props to Modal
      })
      .catch((err) => {
        
      });
  }, [memberNames]);
  return <div></div>;
}

This is the Modal Component:

const [dropDownValue, setDropDownValue] = useState("");

 const handleChange = (e) => {
    setDateValue(e.target.value);
  };

  const onDropdownSelected = (e) => {
    setDropDownValue(e.target.value);
  };
return(
  <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered>
      {console.log({...props})}; // prints --> {show: false, supermarketid: "", onHide: ƒ}
      <Modal.Body>
            <div className="container">
              <Row>
                <Col sm={10}>
                  <Form>
                    <Form.Group controlId="SuperMarketId">
                      <Form.Label>
                           <p>SuperMarket Members</p>
                      </Form.Label>
                    <Form.Control
                      as="select"
                      value={dropDownValue}
                      onChange={onDropdownSelected}></Form.Control>
                    </Form.Group>
                  </Form>
                </Col>
              </Row>
            </div>
     </Modal.Body>
</Modal>
)

Here when I tried console.log({...props}), it only displayed the props that were sent from the Supermarket Component, not the SupermarketMembers Component.

How do I get memberNames state inside Modal Component? Where am I even going to call the component SupermarketMembers? & how do I pass the supermarketid prop passed from Supermarket to Modal Component, to be passed to SupermarketMembers?

react-props axios react-bootstrap reactjs javascript
1 Answers

I think you need to pass Modal component in the jsx return of SupermarketMembers.

function SupermarketMembers() {
  const [memberNames, setMemberNames] = useState([]);
  const token = localStorage.getItem("Token");
  useEffect(() => {
    axios
      .post(
        "/viewMemberInSupermarket",
        {
          supermarketid: 1,  //display statically for now till I know how to pass it
        },
        {
          headers: {
            "auth-token": token,
          },
        }
      )
      .then((response) => {
        let tempArr = [];
        response.data.forEach((element) => {
          tempArr.push(element.member.name);
        });

        setMemberNames(tempArr);
        console.log(memberNames) //displays array correctly             
      })
      .catch((err) => {
        
      });
  }, [memberNames]);
  return <div><Modal memberNames={memberNames} /></div>;
}

You are passing {...props} inside the Modal component, but it is not reading as dropdown values ... by the way, I think you could settle a more simple hierarchy of components. For instance, you don't need a separate component to fetch data from a remote source. You could something like this:

-> SuperMarkets
--> SuperMarket
---> Modal

pass your SupermarketId to Modal component, then inside, use useEffect(()=>{},[]) to fetch memberNames, next, fill the select form control which exists inside the same component

user_56813220
Related