title: How can I Send data to another Component without using Parent and Child Relation in React
body: <p>I need to send the data to &quot;Search&quot; Component from &quot;SearchingData&quot; Component. SearchingData is the child of searchData, Here I need to send the &quot;datacame&quot; variable data to Search Component,Can anyone Help me out this, Thanks in Advance.
  I need to access that &quot;datacame&quot; 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...</p>
  <pre class="lang-tsx prettyprint-override"><code>import React, { ChangeEvent, useState } from &quot;react&quot;;
  
  type searchData = {
    handleSearch: (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void;
    seardhingDTata: any;
    seardhDTata: string;
  };
  
  const SearchingData: React.FC&lt;searchData&gt; = ({
    handleSearch,
    seardhingDTata,
    seardhDTata,
  }) =&gt; {
    const UpdateData = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      handleSearch(e);
    };
  
    const [datacame, setdatacame] = useState(seardhDTata);
    const serachData = () =&gt; {
      let defaultData = seardhingDTata;
      const filterdserachData = seardhDTata
        ? defaultData.filter((use: any) =&gt;
            use.UserName.toLowerCase().startsWith(seardhDTata)
          )
        : defaultData;
      //console.log(filterdserachData);
      setdatacame(filterdserachData);
    };
  
    return (
      &lt;React.Fragment&gt;
        &lt;div&gt;
          &lt;input type=&quot;text&quot; onChange={UpdateData} /&gt;
          &lt;button className=&quot;btn btn-blue btn-sm&quot; onClick={serachData}&gt;
            Serach
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default SearchingData;
  </code></pre>
  <pre class="lang-tsx prettyprint-override"><code>import React, { ChangeEvent } from &quot;react&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import SearchingData from &quot;./SearchingData&quot;;
  
  const Search: React.FC = () =&gt; {
    let dispatch = useDispatch();
    //Read the Data from Store
    let readingStateData: searchReducsers.ISearch = useSelector(
      (state: { searchingData: searchReducsers.ISearch }) =&gt; {
        return state.searchingData;
      }
    );
    // Update the Data
    useEffect(() =&gt; {
      //console.log(readingStateData.search)
      dispatch(searchActions.fetchUser());
    }, []);
  
    const [seardhDTata, setseardhDTata] = useState(&quot;&quot;);
    // const [searchText, setsearchText] = useState('');
  
    const handlesearching = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      //console.log(e.target.value);
      setseardhDTata(e.target.value);
    };
  
    const defaultData = readingStateData.search;
  
    return (
      &lt;React.Fragment&gt;
        &lt;div className=&quot;container mt-3&quot;&gt;
          &lt;div className=&quot;row&quot;&gt;
            &lt;div className=&quot;col-md-3&quot;&gt;
              &lt;div className=&quot;card&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;SearchingData
          handleSearch={handlesearching}
          seardhingDTata={defaultData}
          seardhDTata={seardhDTata}
        /&gt;
        &lt;table className=&quot;table table-hover text-center table-primary&quot;&gt;
          &lt;thead className=&quot;text-black&quot;&gt;
            &lt;tr&gt;
              &lt;th&gt;UserName&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Gender&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;React.Fragment&gt;
              {defaultData.map((user) =&gt; {
                return (
                  &lt;tr&gt;
                    &lt;td&gt;{user.UserName}&lt;/td&gt;
                    &lt;td&gt;{user.PhoneNumber}&lt;/td&gt;
                    &lt;td&gt;{user.email}&lt;/td&gt;
                    &lt;td&gt;{user.gender}&lt;/td&gt;
                  &lt;/tr&gt;
                );
              })}
            &lt;/React.Fragment&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default Search;
  </code></pre>