Display Data after Clicking Button from other Component React

Question

Hi I am making a search engine for a domain lookup service and I want to take the user input and display it below the search bar as a part of a screen that shows if it is available for purchase or not.

Here is my App.js File

function MyApp({ Component, pageProps,   
navigation }) {
const [searchTerm, setSearchTerm] = 
useState("");


return (

<Web3ReactProvider getLibrary={getLibrary}>
  <div className='App'>
    <h2 className='h2'>Theta Name Services</h2>
    
  </div>
  <div>
        <div className='searchCont'>
            <TextField
                fullWidth
                id="standard-bare"
                variant="outlined"
                label="Search for Domains..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                InputProps={{
                endAdornment: (
                    <IconButton onClick={(props) => {<Search name={props.name}></Search>} }>
                    <SearchOutlined />
                    </IconButton>
                ),
                }}      
            />
        </div>
        
        <div >
          <h1>{searchTerm}</h1>
        </div>
    </div>

 


export default MyApp

Here is my SearchPage.js component

function searchResults(props) {
    var  style1 = {color: 'blue'};
    var style2 = {marginLeft: '100px'};
    const [searchTerm, setSearchTerm] = useState("");
    const [domains, setDomains] = useState([]);

    console.log(props.name)
    return(

    <h1>{props.name}</h1>

)


}

const searchDomains = async (domainName) => {
    const response = await fetch(`${API_URL}&s=${domainName}`);
    const data = await response.json();

//setDomains(data.Search);

    return(
    <div style={{margin: 100, backgroundColor:"skyblue"}}>
    <h1>Hello World</h1>
</div>

)

  }

export default searchResults

Basically all I am trying to do is staticly display the user inputed domain. It gets set to the value "searchTerm" but whenever i do this chunk of code

<IconButton onClick={() => {<Search name={searchTerm}></Search>} }>

It never displays anything onClick, but I can get it to display what is being typed in real time just not what is searched.

Any help would be much appreciated thanks! Would post an image but dont have enough rep

Answer 1

If I am not wrong about your implementation, you want the search component to be shown whenever you click on the icon button. So what you could do is to have a state to render the search component whenever you click on the iconButton.

Your modified App.js file:

import Search from "./SearchTerm.js"; // Assuming your component name
import { useState } from "react";
function MyApp() {
  const [showSearchTerm, setShowSearchTerm] = useState(false);

  return (
    <>
      <Web3ReactProvider getLibrary={getLibrary}>
        <div className="App">
          <h2 className="h2">Theta Name Services</h2>
          <div className="searchCont">
            <TextField
              fullWidth
              id="standard-bare"
              variant="outlined"
              label="Search for Domains..."
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
              InputProps={{
                endAdornment: (
                  <IconButton
                    onClick={() => {
                      setShowSearchTerm(true);
                    }}
                  >
                    <SearchOutlined />
                  </IconButton>
                ),
              }}
            />
          </div>

          <div>
            <h1>{searchTerm}</h1>
          </div>
        </div>
      </Web3ReactProvider>
      {showSearchTerm && <Search name={searchTerm} />}
    </>
  );
}

export default MyApp;

What we are trying to do here is to conditionally render the Search Component based on when you click the component and we are directly taking the state from what you have given as the input.

Update: For your scenario where the search term needs to be static, you could have displaySearchTerm state as a string and display the search term that is displayed.

import Search from "./SearchTerm.js"; // Assuming your component name
import { useState } from "react";
function MyApp() {
  const [displaySearchTerm, setDisplaySearchTerm] = useState("");

  return (
    <>
      <Web3ReactProvider getLibrary={getLibrary}>
        <div className="App">
          <h2 className="h2">Theta Name Services</h2>
          <div className="searchCont">
            <TextField
              fullWidth
              id="standard-bare"
              variant="outlined"
              label="Search for Domains..."
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
              InputProps={{
                endAdornment: (
                  <IconButton
                    onClick={() => {
                      setDisplaySearchTerm(searchTerm);
                    }}
                  >
                    <SearchOutlined />
                  </IconButton>
                ),
              }}
            />
          </div>

          <div>
            <h1>{searchTerm}</h1>
          </div>
        </div>
      </Web3ReactProvider>
      {displaySearchTerm && <Search name={displaySearchTerm} />}
    </>
  );
}

export default MyApp;

In this case what happens is, the display search term string state is updated each time you click the button. And the SearchTerm component shows that content according to the updated state.