CODEWITHSUNDEEP
javascriptreactjs
Kazi Arifin Islam
Kazi Arifin Islam

Reputation: 11

change state of parent component from child

I have got a parent file and 2 child files, the Parent file(App.js). it contains the showGraph state.

function App() {
  const [data, setData] = useState([]);
  const [showGraph, setShowGraph] = useState(false);

  return (
    <div className="App">
  
      <Search setData={setData} setShowGraph={setShowGraph}/>
   

      <Api data={data} showGraph={showGraph}/>

the Api.js file. It contains the chart, which I wanna show on search Item click.

const Api = ({ data: records }, { showGraph }) => {return (
    <>
       {showGraph? (
      <div>
     
        <div className="show">
          <Areachart width="50%" height={400}>
            ...
          </Areachart>
        </div>
      </div>
       ) : (
        false
      )} 
    </>
  );
};

And The Search.js file. It's the search file where the searched data shown, and by clicking them, the state should change.

const Search = ({ setData }, { setShowGraph }) => {
searchTerm.length !== 0 && (
    <div className="dataResult">
      {searchTerm.map((record, key) => {
        return (
          <h3
            key={key}
            onClick={() => {
          
              setShowGraph(true)
            }}
          >
            {record.symbol}
          </h3>
        );}

So, the thing is, I want to implement that, Initially there will be no chart displayed. But whenever I click on the searced Item, the chart should display. what have I done wrong?

Upvotes: 0

Views: 25

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

You are destructuring the props wrong.

The

const Api = ({ data: records }, { showGraph }) => {return (

should be

const Api = ({ data: records, showGraph }) => {return (

And the

const Search = ({ setData }, { setShowGraph }) => {

should be

const Search = ({ setData, setShowGraph }) => {

Upvotes: 1

Related Questions