ReactJS onClick response response

Question

Im working on a ReactJS project where you can generate random activity when you click the generate button. I am making a selection for my api to display some data from it. It works great. Now I want to make a selection and display the returned data every time I click the generate button (which is in the home component). Thus, the generation button should perform a new selection and update the component. It should also be empty by default. I searched for a while and cannot find the answer. Can some of you guys help me? Thank.

fetch component

import React from 'react'

export class ItemLister extends React.Component {
constructor() {
super();
     this.state={suggestion:""}
}

componentDidMount(){
fetch("......./suggestions/random", {
  method: "GET",
  dataType: "JSON",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  }
})
.then((resp) => {
  return resp.json()
}) 
.then((data) => {
  this.setState({ suggestion: data.suggestion })                    
})
.catch((error) => {
  console.log(error, "catch the hoop")
})
}

render() {
return(
  <h2> 
    {this.state.suggestion}
  </h2>
  )
 }
} 

home component

import React from 'react'
import {ItemLister} from './apiCall'

export class Home extends React.Component {
constructor(props) {
    super(props)
    console.log()
    window.sessionStorage.setItem ('name',this.props.params.name)
    window.sessionStorage.setItem ('token', this.props.params.token)
}

render() {
    return (
        <div className="contentContainer AD">
            <table>
                <thead>
                    <tr>
                        <th><p>Het is heel leuk als het werkt!</p></th>
                    </tr>
                </thead>
                <tbody >
                    <tr><td><ItemLister/></td></tr>
                </tbody>
            </table>
            <div className="container center">
                <button>GENERATE</button>
                <button>SAVE</button>
                <button>MATCH</button>
            </div>
        </div>
    )
  }
}

Answer 1

, home home , Itemlister. , , - Itemlister. :

export class Home extends React.Component {
constructor(props) {
    super(props)
    this.state = {suggestion: ""}
    ...
}

componentDidMount(){
  // For initial data
  this.fetchData();
}

fetchData = () => {
  fetch("......./suggestions/random", {
    method: "GET",
    dataType: "JSON",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    }
  })
  .then((resp) => {
    return resp.json()
  }) 
  .then((data) => {
    this.setState({ suggestion: data.suggestion })                    
  })
  .catch((error) => {
    console.log(error, "catch the hoop")
  })
}

render() {
    return (
        ...
                <tbody >
                   // Pass state to itemlister like this
                    <tr><td><ItemLister suggestion={this.state.suggestion}/></td></tr>
                </tbody>
            </table>
            <div className="container center">
                // Add event handler here. On every click it will fetch new data
                <button onClick={this.fetchData}>GENERATE</button>
                <button>SAVE</button>
                <button>MATCH</button>
            </div>
        </div>
    )
  }
}

Itemlister .

export class ItemLister extends React.Component {
    constructor() {
    super();
    }

    render() {
    return(
      <h2> 
        {this.props.suggestion}
      </h2>
      )
     }
    } 

dubes : - , ,

function ItemLister(props) {
  return <h2> 
            {props.suggestion}
          </h2>;
}

Answer 2

, ... , :

  state = {
    visible: false
  }

  generateItem() {
    if (this.state.visible) {
      return <ItemLister />
    }
    return <h2>nothing to show</h2>
  }

  render() {
    return(
      <div>
        <button onClick={() => this.setState({visible: true})}>Click</button>
        {this.generate()}
      </div>
    )
  }

onClick , , rerender, generateItem .

, , .