How to pass value from input to another component in react typescript-CodePudding

I want to take value user pass to input and put it as in another as heading

I'm tired to pass value from component to another >>put it's not relation between parent and child >>>the two component in the same route ...and take the date I choice from datepicker and send it as heading to another component .....

if I have component Ok.ts and component view.ts in folder pages in Ok.ts I have input so this input the user will pass the place he want and get the date from cleander so in view.ts I want to show heading as your tour to place is date ``

import MultipleDatePicker from "react-multiple-datepicker";
  const [input, setInput] = useState("");
  const [howInput, setHow] = useState("");
  const [submittedInput, setSubmittedInput] = useState("");
  const [submittedTimes, setHowTimes] = useState("");

<form onSubmit={(e) => e.preventDefault()}>
          <p className="h5">Where </p>
          <p className='m-5'>
          <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
           type="text" 
           className="form-control"
            id="exampleFormControlInput1" 
            placeholder="type here"/>
          </p>
          <p className="h5">When </p>
          <MultipleDatePicker
      onSubmit={(dates: any) => console.log("selected dates ", dates)}
    />
        <p className="h5">How Many </p>
          <p className='m-5'>
          <input 
          value={howInput}
          onChange={(e) => setHow(e.target.value)}
          type="text" className="form-control" id="exampleFormControlInput1" placeholder="type here"/>
          </p>
          <button className='btn-primary infbutton' onClick={()=>setSubmittedInput(input)}>add info</button>
          
          <h2>{submittedInput}</h2>
    </form>

CodePudding user response：

I am not sure what you mean because the question is unclear, but have you thought about using a Context?

You can create an object which can be accesible in multiple components. This can, of course, be combined with state.

1-Create the context (in this case I made a component wrapper to make it easier to include in the code.

export const DataContext= React.createContext({
  data: 60, //Default values in case no value is provided
  setData: () => {}
});

export function DataContextContainer({children}) {
  const [data, setData] = useState(60);

  return (
    <DataContext.Provider value={{ data, setData}}>
      {children}
    </DataContext.Provider>
  );
}

2-Wrap your desired components (which will read that data) with the component

import {DataContextContainer} from "./DataContextContainer";
 ...
<DataContextContainer>
    ...
         <YourComponent/>
    ...
</DataContextContainer>

3- Now you can easily have access to that object in all the components wrapped using the hook useContext or a context consumer.

import {DataContext} from './DataContext'

...
    const {data, setData} = useContext(DataContext);
...