How can I pass values from one component to another component?

Question

I have SearchBox.js component which sets two values onChange I want to pass select value and input value onClick onSumbit to Movie.js component, I can pass only one value but I cannot pass the second value (yearValue), is there way to pass two values to Movie.js component.

function SearchBox(props) {
  const [searchValue, setSearchValue] = useState("");
  const [yearValue, setYearValue] = useState("");
  const getDropList = () => {
    const year = new Date().getFullYear();
    return Array.from(new Array(121), (v, i) => (
      <option key={i} value={year - i}>
        {year - i}
      </option>
    ));
  };
  return (
    <div>
      <Container>
        <Row>
          <Col>
            <InputGroup className="mb-3">
              <select value={yearValue} onChange={e => setYearValue(e.target.value)}>
                {getDropList()}
              </select>
              <FormControl
                value={searchValue}
                type="text"
                name="searchValue"
                onChange={e => setSearchValue(e.target.value)}
                placeholder="Search by title"
                aria-describedby="basic-addon2"
              />
              <InputGroup.Append>
                <Button
                  onClick={() => props.onSubmit(searchValue)}
                  variant="dark"
                >
                  Search
                </Button>
              </InputGroup.Append>
            </InputGroup>
          </Col>
        </Row>
      </Container>
    </div>
  );
}
export default SearchBox;


function Movie() {
const [data, setData] = useState(null);
 const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
 const [q, setQuery] = useState("");
const [activateModal, setActivateModal] = useState(false);
 const [detail, setShowDetail] = useState(false);
const [detailRequest, setDetailRequest] = useState(false);
 const [year,setYear] = useState("")

 return (
   <div>
      <Row>
        <Col>
          <SearchBox onSubmit={setQuery} />
        </Col>  
      </Row>

Answer 1

You can pass both value like this:

<Button
                  onClick={() => props.onSubmit(searchValue,yearValue)}
                  variant="dark"
                >
                  Search
                </Button>

Inside Movie component. Capture those value:

function Movie() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const [q, setQuery] = useState("");
  const [activateModal, setActivateModal] = useState(false);
  const [detail, setShowDetail] = useState(false);
  const [detailRequest, setDetailRequest] = useState(false);
  const [year, setYear] = useState("");

  const handleSubmit = (selectValue,yearValue) => {
    //do whatever you want to do
  }
  return (
    <div>
      <Row>
        <Col>
          <SearchBox onSubmit={handleSubmit} />
        </Col>
      </Row>
    </div>
  );
}

Answer 2

You may want to take a look at the React Docs to learn about the Render Props technique.

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. Learn more here