en mi aplicación.js
en constante APP
yo estoy volviendo
<Display results = {(good,neutral,bad)}></Display>cuales son todos numeros
en mi componente de visualización que tengo como este
const Display = ({good,neutral,bad}) => (los parámetros se vuelven indefinidos, o cualquiera. ¿Cómo es que no se pasan los números?
código completo
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 AppLa forma en que estás pasando los apoyos es incorrecta. Prueba esto
<Display good={good} neutral={neutral} bad={bad}></Display>En Display , no está desestructurando la propiedad de results , sino toda la props del componente. Así que cambie la forma en que usa el componente para
<Display {...{good, neutral, bad}} />que es la abreviatura de
<Display good={good} bad={bad} neutral={neutral} />O
cambie el componente de visualización para desestructurar results
const Display = ({results}) => { const {good, neutral, bad} = results; return ( // ... ) }y cómo lo usas para
<Display results={{good, neutral, bad}} />tu puedes cambiar a <Mostrar resultados = {{bueno:bueno, neutral:neutro, malo:malo}}>
Por último, puede recibir los resultados de la siguiente manera:
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> )Nota: Recuerde que no puede dividir 0, probablemente obtenga un error durante la compilación de la división