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
The way you are passing props is wrong.Try this
<Display good={good} neutral={neutral} bad={bad}></Display>
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} />
OR
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}} />
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