Блог

Мне нужно передать реквизиты от дочернего компонента родительскому, чтобы позже я мог передать реквизиты родственному компоненту. Дети живут по своему собственному маршруту /регистрации и /списку догадок. Моя проблема в том, что для передачи реквизитов (с использованием обратного вызова) от дочернего элемента к родительскому, мне нужно вернуть дочерний элемент в родительском компоненте, когда я посещаю маршрут дочернего компонента, компонент отображается дважды. Я хочу найти способ избежать этого, имея в виду, что моя конечная цель-передать реквизит между братьями и сестрами.

Мой код выглядит так, как это приложение.jsx

 return (
    <>
    <Router>
    <div style={{width:100 "vw", height:80, background:"lightblue"}}>
     
      <Registration setEventInfo={setEventInfo}/>
      <Gueslist wedding={wedding}/>
    </div>
  
    <Switch>
      <Route path="/about" exact component={About}></Route>
      <Route path="/" exact  component={Login}></Route>
      <Route path="/registration" exact component={Registration}></Route>
      <Route path="/gueslist" exact component={Gueslist}></Route>

      <Route path="*" exact component={Notfound}></Route>
    </Switch>
  </Router>
  </>
  );
}

export default App;
 

Регистрация дочернего компонента выглядит следующим образом:

 function Registration(props){
    let history=useHistory()
    const [weddingName, setWeddingName]=useState('');
    const [groom, setGroom]=useState('');
    const [bride, setBride]=useState('');
    const [location, setLocation]=useState('');
    const[date, setDate]= useState('');

    const handleSubmit= (e)=>{

        e.preventDefault()
       props.setEventInfo({
           weddingName:weddingName,
           groom:groom,
           bride:bride,
           location:location,
           date:date

       })

    }
    


    return(

        <div>
            <form onSubmit={handleSubmit}>
                <label htmlFor="">Name the event</label>
                    <input type="text" onChange={(e)=>setWeddingName(e.target.value)} value={weddingName} placeholder="Joe and Jane Wedding" />
                <label htmlFor="">Groom</label>
                    <input type="text" onChange={(e)=>setGroom(e.target.value)} value={groom} />
                <label htmlFor="">Bride</label>
                    <input type="text" onChange={(e)=>setBride(e.target.value)}value={bride} />
                <label htmlFor="">Location</label>
                    <input type="text" onChange={(e)=>setLocation(e.target.value)}value={location} />
                <label htmlFor="">Date</label>
                    <input type="date" onChange={(e)=>setDate(e.target.value)} value={date} />


                 <button>Get Started</button>
            </form>
           
        </div>
    )
}
export default Registration