I am trying to create a function that serves as a card counter so that when I press the button a card is added and - when subtracted to prevent more than 4 equal cards. My problem is that I'm afraid that React's onclick and onClick is colliding with JS and Html. I am new to React and would like to solve this question please.

import './App.css';
import React from 'react';

function App() {

  const [equipo, setEquipo] = React.useState([]);
  let listaCartas = Array();
  let listaPrecios = Array();
  let campoCartas = document.getElementById('muestroCartas');
  let idArticulo = 0;
  let contador = 1;


  // Constructor
  React.useEffect(() => {
    document.title = "Magic - React";
    obtenerDatos();
  }, []);

  // Metodo que recoge info de una Api
  const obtenerDatos = async () => {
    const data = await fetch("https://api.scryfall.com/cards/search?order=set&q=e:ugin&unique=prints");
    const info = await data.json();
    setEquipo(info);
  };

  // Metodo que funciona como un carrito de compra
  // que muestra las cartas elegidas
  const carrito = (nombreCarta, precioCarta) => {
    listaCartas.push(nombreCarta);
    listaPrecios.push(precioCarta);
    campoCartas.innerHTML  = "<b>Nombre: </b>"   nombreCarta   " <b>Precio: </b>"   precioCarta   " € <b>Cantidad</b><p id='numero"   idArticulo   "'>"   contador   "</p><br><button onclick='masCartas(idArticulo)'> </button><button onclick='menosCartas(idArticulo)'>-</button><br>";
    idArticulo  ;
  };

/**
* METODO QUE REALIZA LA SUMA
* DEL NUMERO DE CARTAS ELEGIDAS
* @param {*} idArticulo contador de la carta metida en carrito
*/
//function masCartas(idArticulo) {
const masCartas = (idArticulo) => {
  let numeroStock = parseInt(document.querySelector("#numero"   idArticulo).innerText);
  numeroStock  ;
  if (numeroStock > 4) {
    alert("No puede tener mas de 4 cartas iguales");
  } else {
    document.querySelector("#numero"   idArticulo).innerText = numeroStock;
  }
}
/**
* METODO QUE REALIZA LA RESTA 
* DEL NUMERO DE CARTAS ELEGIDAS
* @param {*} idArticulo contador de cuantas cartas tiene en carrito
*/
//function menosCartas(idArticulo) {
const menosCartas = (idArticulo) => {
  let numeroStock = parseInt(document.querySelector("#numero"   idArticulo).innerText);
  numeroStock--;
  if (numeroStock < 0) {
    numeroStock = 0;
  } else {
    document.querySelector("#numero"   idArticulo).innerText = numeroStock;
  }
}

return (
  <div className="App">
    <div class='leftDiv'>
      <table>
        <tr>
          <th>Nombre</th>
          <th>Imagen</th>
          <th>Venta</th>
        </tr>
        {equipo?.data?.map((item) => (
          <tr>
            <td>{item.name}</td>
            <td><img src={item.image_uris.normal}></img></td>
            <td><button onClick={() => carrito(item.name, item.prices.eur)}>Añadir</button></td>
          </tr>
        ))}
      </table>
    </div>
    <div class='rightDiv'>
      <h2>Cartas escogidas</h2>
      <div id='muestroCartas'></div>
    </div>
  </div >
);
}

export default App;

The moment I hit the add or subtract button when a card is added I get an error on the console that says "Uncaught ReferenceError: masCartas is not defined onclick Two.css:1" and I don't understand how it shows error in the css if it supposedly has nothing to do with one component with another.

CodePudding user response：

Sorry,it would be a comment, but i am not allowed. I am still looking for the id 'numero', where is it? I see that you trying to manipulate it(innerText), but i can't find it.

An advice, we don't use query selector on React, because we work with states, so i recommend you study more about states in React.

CodePudding user response：

The code you provided is not how things are usually done in React - you don't want to modify the innerHTML property by dynamically assigning raw code to it.

I suppose the problem you have at the moment is that the masCartas function is defined inside of the component, but doesn't exist in the innerHTML you render. The argument you pass (idArticulo) will not contain the value you expect as well.

In order to fix it, change the code modifying <div id='muestroCartas'></div> via innerHTML to this div having children (all the HTML code you wrote will have to be rewritten to React components).