mercredi 24 novembre 2021

How to get ID from react Route

I want to get the "BusinessId" of this URL

    
       <Route path={[
              `${match.url}/Business/:BusinessId/` 
              

            ]}>
               <Change/>

      </Route>

But the methods I am getting here and on other websites aren't helping me that much, I cant use components or anything with this kind of route path declaration (sorry, I am new to react and Laravel) and the thing is that the "id" comes from my "Change" class.

My "Change" class is like this:

  const [showModal, setShowModal] = useState(false);
  const [business, setBusiness] = useState();
  const { authUser } = useContext(AuthUserContext);
  const { businessId } = useParams();
  const history = useHistory();

  useEffect(useCallback(() => {
    const [run] = authUser.role === "client" ? API.get(`users/${authUser.id}/business`) : API.get("business");
    run().then((response) => {
      setNegocios(response);
      const DEFAULT_ROUTE = `/projection/business/${response[0].id}`;

      validateRoute(response, businessId, () => {
        history.push(DEFAULT_ROUTE);
      });
    });
  }, [authUser, history, businessId]), [businessId]);


  function handleCloseModal() {
    setShowModal(false);
  }
  function handleShowModal() {
    setShowModal(true);
  }
  function handleSelection(mappedBusiness) {
    history.push(`/projection/business/${mappedBusiness.id}`);
    handleCloseModal();
  }

  function getName() {
    if (business) {
      const business = business.find((businessF) => businessF.id === parseInt(businessId, 10));
      return business ? business.name : "";
    }
    return "";
  }

  return (

      <div className="content">
        <wrap>
          <h3 className="empresa">{getName()}</h3>
        </wrap>
        <button className="alterar pt-3" onClick={handleShowModal}>Change <i className="fas fa-exchange-alt"/></button>
        <Modal className="ChangeBusinessModal" show={showModal} onHide={handleCloseModal}>
          <Modal.Header closeButton>
            <Modal.Title></Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {business &&
           business.map((mappedBusiness) => (
             <button
               key={mappedBusiness.id}
               onClick={handleSelection.bind(null, mappedBusiness)}
               className="button-business">
               {mappedBusiness.name}
             </button>))
            }
          </Modal.Body>
        </Modal>
      </div>
  );

}
export default Change;

The thing is, there's a way I can get the ID that comes from the Change modal to the route Id I have in the other class? And how?

Once again, sorry if it's kind of dumb, but I am new to this



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire