Reactjs/javascript question. about parameters-CodePudding

in my app.js

in const APP

i am returning

<Display results = {(good,neutral,bad)}></Display>

which are all numbers

in my display component which i have as this

const Display = ({good,neutral,bad}) => (

the parameters becomes undefined, or any. how come the numbers are not being passed.

full code

import { useState } from 'react'

const App = () => {
  // save clicks of each button to its own state
 
    const [good, setGood] = useState(0)
    const [neutral, setNeutral] = useState(0)
    const [bad, setBad] = useState(0)
  

  return (
    <div>
      <h1>give feedback</h1>
    <button onClick={() => setGood(good  1)}>Good </button> 
    <button onClick={() => setNeutral(neutral  1)}>Neutral</button>
    <button onClick={() => setBad(bad  1)}>Bad</button> 
    <h1>Statistics</h1>
    <Display results = {(good,neutral,bad)}></Display>
    <h1>{good}{ neutral} {bad}</h1>

    </div>
   
  )
  
}

const Display = ({good,neutral,bad}) => (
  console.log(good),
  <table>
  <tr>
    <td>good</td>
    <td>{good}</td>
  </tr>
  <tr>
    <td>neutral</td>
    <td>{neutral}</td>
  </tr>
  <tr>
    <td>bad</td>
    <td>{bad}</td>
  </tr>
  <tr>
    <td>all</td>
    <td>{good neutral bad}</td>
  </tr>
  <tr>
    <td>average</td>
    <td>{(good-bad)/(good neutral bad)}</td>
  </tr>
  <tr>
    <td>positive</td>
    <td>{(good)/(good neutral bad)}</td>
  </tr>
</table>
)



export default App

CodePudding user response：

The way you are passing props is wrong.Try this

<Display good={good} neutral={neutral} bad={bad}></Display>

CodePudding user response：

In Display you're not destructuring the results prop, but the entire props of the component. So either change how you use the component to

<Display {...{good, neutral, bad}} />

which is short for

<Display good={good} bad={bad} neutral={neutral} />

change the Display component to destructure results

const Display = ({results}) => {
const {good, neutral, bad} = results;
  return (
// ...
)
}

and how you use it to

<Display results={{good, neutral, bad}} />

CodePudding user response：

you can change to <Display results = {{good:good, neutral:neutral, bad:bad}}>

Lastly you can receive the results prop as below:

const Display = ({results}) => (
  console.log(results),
  <table>
  <tr>
    <td>good</td>
    <td>{results.good}</td>
  </tr>
  <tr>
    <td>neutral</td>
    <td>{results.neutral}</td>
  </tr>
  <tr>
    <td>bad</td>
    <td>{resuts.bad}</td>
  </tr>
  <tr>
    <td>all</td>
    <td>{good neutral bad}</td>
  </tr>
  <tr>
    <td>average</td>
    <td>{(results.good-results.bad)/(results.good neutral results.bad)}</td>
  </tr>
  <tr>
    <td>positive</td>
    <td>{(results.good)/(rsults.good results.neutral results.bad)}</td>
  </tr>
</table>
)

Note: Remember you can not divide 0, you may probably get an error during division compilation

CodePudding user response：

your problem is here

<Display results = {(good,0,0)}></Display>

it should be

<Display results={{good, neutral:0, bad:0}} />

or probably

<Display results={{good, neutral, bad}} />