How can I Send data to another Component without using Parent and Child Relation in React

Question

I need to send the data to "Search" Component from "SearchingData" Component. SearchingData is the child of searchData, Here I need to send the "datacame" variable data to Search Component,Can anyone Help me out this, Thanks in Advance. I need to access that "datacame" variable data to next Search Component, So Now How i can send that Data Search Component,Can anyone Help me out this, Thanks in Advance...

import React, { ChangeEvent, useState } from "react";

type searchData = {
  handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
  seardhingDTata: any;
  seardhDTata: string;
};

const SearchingData: React.FC<searchData> = ({
  handleSearch,
  seardhingDTata,
  seardhDTata,
}) => {
  const UpdateData = (e: ChangeEvent<HTMLInputElement>) => {
    handleSearch(e);
  };

  const [datacame, setdatacame] = useState(seardhDTata);
  const serachData = () => {
    let defaultData = seardhingDTata;
    const filterdserachData = seardhDTata
      ? defaultData.filter((use: any) =>
          use.UserName.toLowerCase().startsWith(seardhDTata)
        )
      : defaultData;
    //console.log(filterdserachData);
    setdatacame(filterdserachData);
  };

  return (
    <React.Fragment>
      <div>
        <input type="text" onChange={UpdateData} />
        <button className="btn btn-blue btn-sm" onClick={serachData}>
          Serach
        </button>
      </div>
    </React.Fragment>
  );
};

export default SearchingData;

import React, { ChangeEvent } from "react";
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import SearchingData from "./SearchingData";

const Search: React.FC = () => {
  let dispatch = useDispatch();
  //Read the Data from Store
  let readingStateData: searchReducsers.ISearch = useSelector(
    (state: { searchingData: searchReducsers.ISearch }) => {
      return state.searchingData;
    }
  );
  // Update the Data
  useEffect(() => {
    //console.log(readingStateData.search)
    dispatch(searchActions.fetchUser());
  }, []);

  const [seardhDTata, setseardhDTata] = useState("");
  // const [searchText, setsearchText] = useState('');

  const handlesearching = (e: ChangeEvent<HTMLInputElement>) => {
    //console.log(e.target.value);
    setseardhDTata(e.target.value);
  };

  const defaultData = readingStateData.search;

  return (
    <React.Fragment>
      <div className="container mt-3">
        <div className="row">
          <div className="col-md-3">
            <div className="card"></div>
          </div>
        </div>
      </div>
      <SearchingData
        handleSearch={handlesearching}
        seardhingDTata={defaultData}
        seardhDTata={seardhDTata}
      />
      <table className="table table-hover text-center table-primary">
        <thead className="text-black">
          <tr>
            <th>UserName</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <React.Fragment>
            {defaultData.map((user) => {
              return (
                <tr>
                  <td>{user.UserName}</td>
                  <td>{user.PhoneNumber}</td>
                  <td>{user.email}</td>
                  <td>{user.gender}</td>
                </tr>
              );
            })}
          </React.Fragment>
        </tbody>
      </table>
    </React.Fragment>
  );
};

export default Search;

Answer 1

Have a state in the Search component which updates the state when we click on the button on the SearchingData. Now use this state to filter the data.

Searching Data Component

import React, { ChangeEvent, useState } from "react";

type searchData = {
  setSearchText: (searchText: string) => void;
};

const SearchingData: React.FC<searchData> = ({
  handleSearch,
}) => {
  const [ searchInput, setSearchInput ] = useState('')

  const serachData = () => {
    setSearchText(searchInput);
  };

  return (
    <React.Fragment>
      <div>
        <input type="text" value={searchInput} onChange={(e) => setSearchInput(e.target.value) } />
        <button className="btn btn-blue btn-sm" onClick={serachData}>
          Serach
        </button>
      </div>
    </React.Fragment>
  );
};

export default SearchingData;

Search Component

import React, { ChangeEvent } from "react";
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import SearchingData from "./SearchingData";

const Search: React.FC = () => {
  let dispatch = useDispatch();
  const [searchQuery, setSearchQuery] = useState("");
  //Read the Data from Store
  let readingStateData: searchReducsers.ISearch = useSelector(
    (state: { searchingData: searchReducsers.ISearch }) => {
      return state.searchingData;
    }
  );
  // Update the Data
  useEffect(() => {
    //console.log(readingStateData.search)
    dispatch(searchActions.fetchUser());
  }, []);

  const handlesearching = (searchText: string) => {
    //console.log(e.target.value);
    setSearchQuery(searchText);
  };

  const dataToDisplay = searchQuery.trim().length > 0 ? readingStateData.search.filter((use: any) =>
  use.UserName.toLowerCase().startsWith(seardhDTata)
) : readingStateData.search;

  return (
    <React.Fragment>
      <div className="container mt-3">
        <div className="row">
          <div className="col-md-3">
            <div className="card"></div>
          </div>
        </div>
      </div>
      <SearchingData
        setSearchText={handlesearching}
      />
      <table className="table table-hover text-center table-primary">
        <thead className="text-black">
          <tr>
            <th>UserName</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <React.Fragment>
            {dataToDisplay.map((user) => {
              return (
                <tr>
                  <td>{user.UserName}</td>
                  <td>{user.PhoneNumber}</td>
                  <td>{user.email}</td>
                  <td>{user.gender}</td>
                </tr>
              );
            })}
          </React.Fragment>
        </tbody>
      </table>
    </React.Fragment>
  );
};

export default Search;