I want to open modal on the product page with the useState(for this modal) stored on the Main page.

Main page:

import React, { useState } from "react";
import BannerSection from "../components/BannerSection/BannerSection";
import CarsSection from "../components/CarsSection/CarsSection";
import Modal from "../components/Modal/Modal";

const Main = () => {
  const [modalState, setModalState] = useState(false);
  const handleCloseModal = () => setModalState(false);
  const handleOpenModal = () => setModalState(true);

  return (
    <>
      <Modal showModal={modalState} closeModal={handleCloseModal} />
      <BannerSection openModal={handleOpenModal} />
      <CarsSection />
    </>
  );
};

export default Main;

Product item page

const CarProductDetails = () => {
// solution i did //
  const [modalState, setModalState] = useState(false);
  const handleCloseModal = () => setModalState(false);
  const handleOpenModal = () => setModalState(true);
  return (
    
    <>
    <Modal showModal={modalState} closeModal={handleCloseModal} />
//some code//
</>
export const CarProductDetails;

The solution i found is just copy modal useState to Product page and it works. But i feel it's not looking right. Is there a better solution for this?

CodePudding user response：

Pass the state and close function as a param to the child component and define the state in the parent

const CarProductDetails = ({modalState, handleCloseModal}) => { 
  return (
    
    <>
    <Modal showModal={modalState} closeModal={handleCloseModal} />
//some code//
</>
export const CarProductDetails;

CodePudding user response：

Passing state to children could be the solution in some scenarios.

If the sharing of state between components becomes too complex (for larger apps), it's recommended to use a state manager managing cross components state.

https://blog.openreplay.com/top-6-react-state-management-libraries-for-2022/

I like Redux personally https://redux.js.org/

If you go for Redux, this is a really nice library that will help you to structure everyting correctly -> https://redux-toolkit.js.org/

You can also use react context -> https://reactjs.org/docs/context.html depending on the scenarios. https://www.scalablepath.com/react/context-api-vs-redux#context-api-vs-redux-when-to-use-one-over-the-other

CodePudding user response：

If your productpage is a child component then you can pass your useState as parameters from parent to child

CodePudding user response：

Like this,the param "modalDataParams" is what you want to show in open modal.Maybe it's transfromed from a list-item or any others

import React, { useState } from "react";
import BannerSection from "../components/BannerSection/BannerSection";
import CarsSection from "../components/CarsSection/CarsSection";
import Modal from "../components/Modal/Modal";

const Main = () => {
  const [modalState, setModalState] = useState(false);
  const [modalData, setModalData] = useState(false);
  const handleCloseModal = () => {
    setModalState(false)
    setModalData(false);
  };
  const handleOpenModal = (data) =>{
    setModalState(true);
    setModalData(data);
    } 

  return (
    <>
      <Modal showModal={modalState} closeModal={handleCloseModal} />
      <BannerSection openModal={()=>handleOpenModal(modalDataParams)} />
      <CarsSection />
    </>
  );
};

export default Main;

And if you often use the Modal Functions.You can construct a modal compoment. Like this:

import { useState, useEffect } from "react";

const Modal = (props) => {
  const {title,contentComponent,cancleEventFunc,confirmEventFunc} = props

  return (
  <>
  <ModalTitle title={title} />
  {contentComponent}
  <Row>
    <CancelBtn onClick={cancleEventFunc}/>
    <ConfirmBtn onClick={confirmEventFunc} />
  </Row>
  <>
  );
};

export default Modal;

The props.contentComponent is a view component.So you custom and transform a view into the modal component.