0

soy nuevo en react y estoy tratando de incrementar un numero cada vez que pulse un boton Increase, de momento estoy usando coderbyte para practicar ejercicios y este es el código con el que estoy intentando incrementar un numero por ejemplo que empieza a contar desde 0 ¿Alguien podría ayudarme por favor se los agradecería?

import React, { useState } from "react";
import { Text, View } from "react-native";

const SimpleCounter = () => {
  const [count, actualCount] = useState(0);
  let SimpleCounter = () => {
    actualCount(count + 1);
  };
  return (
    
    <View>
      <Text>button count: <span id="actualCount">0</span></Text>
      <button  action={SimpleCounter} id="mainButton">Increase</button>
    </View>
  );
};

export default SimpleCounter;

Y este es el error que recibo en la consola

Warning: Invalid value for prop %s on <%s> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior %s
`action`
button

    at button
    at div
    at eval (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at SimpleCounter (webpack://react/./src/App.js?:24:66)
    at div
    at eval (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at div
    at eval (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/View/index.js?:56:25)
    at AppContainer (webpack://react/../../react-native/node_modules/react-native-web/dist/exports/AppRegistry/AppContainer.js?:22:24)

6
  • y cual es el error?
    – user46896
    el 26 sep. 2022 a las 18:14
  • Buenas tardes @ArcanisGK507 acabo de editar mi pregunta con el error que me da en la consola de coderbyte
    – ALDO56
    el 26 sep. 2022 a las 18:29
  • y que significa ese error?
    – user46896
    el 26 sep. 2022 a las 18:37
  • 2
    button no tiene atributo action... no será que necesitas es ponerle onClick? para que al hacerle click al botón ejecute esa accion?
    – Pipe
    el 26 sep. 2022 a las 19:17
  • 2
    Te hacen falta 2 cosas, lo primero es lo que te dijo @Pipe button no tiene atributo action tienes que utilizar onClick={simpleCounter} y además de eso te falta colocar la variable que captura el estado o sea count en el <Text>si no estara cambiando de estado pero nunca se va a mostrar en pantalla <Text>button count: <span id="actualCount">{count}</span></Text>
    – JoseMgz_Ux
    el 26 sep. 2022 a las 19:38

1 respuesta 1

2

Solo tenes que hacerle algunos cambios al componente:

import React, { useState } from "react";
import { Text, View } from "react-native";

function SimpleCounter () {
  const [count, actualCount] = useState(0);
  let increase = () => {
    actualCount(count + 1);
  };
  return (
    
    <View>
      <Text>button count: <span id="actualCount">{count}</span></Text> /* ponemos {count} para mostrar el valor actual del contador en el span*/
      <button  onClick={increase} id="mainButton">Increase</button> /* al activarse el evento click se llama a la funcion y se incrementa el contador */
    </View>
  );
};

export default SimpleCounter;

no soy experto en React pero eso deberia funcionar, saludos.

2
  • Si, funciona perfecto de hecho estaba editando el código en CodeSandbox
    – JoseMgz_Ux
    el 26 sep. 2022 a las 19:41
  • si, efectivamente funciona @ElFuturo y una llamada onClick era lo que le faltaba muchas gracias a todos
    – ALDO56
    el 26 sep. 2022 a las 19:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.