I don’t know why I get this, if it is according to the React manual

I tell him I am transferring an event from the component child ( ItemCount) to the parent component parent ItemDetail the onADD event that only acts if an item is passed to it and when it does, the state becomes true.

The child has an event called add to cart which triggers the event and passes a product counter.

It runs perfectly but it throws me a warning that is the following.

react-dom.development.js:86 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Can you tell me the mistake and what I did wrong? from now very grateful

I share the codes Thanks

ItemCount (component child)

import React, { useState, useContext} from 'react';
import 'materialize-css/dist/css/materialize.css';
import '../App.css';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlus, faMinus, faPowerOff} from '@fortawesome/free-solid-svg-icons';
import {contextoProducto} from './ProductContext';
import swal from 'sweetalert';


const ItemCount = ({item, stockInitial, initial = 0, onAdd}) => {

  const [contador, setContador] = useState(initial)
  const [stock, setStock] = useState(stockInitial)

  const { addProduct } = useContext(contextoProducto);

  const sumar = () => {  
    setContador(contador + 1)
    setStock(stock - 1);
    avisarStock();
  }

  const restar= () => {
    if(contador > 0){
      setContador(contador - 1);
      setStock(stock + 1);      
    }
    else
    {
      setContador(0);
    }
  }

  const reset = () =>{
    setContador(0);
    setStock(stockInitial);
  }

  const avisarStock = () => {
    if(stock > 0 ){
      
    } 
    else{
      swal('No podemos enviar su envio no hay stock', "Gracias", "error");
      setStock(0);
      setContador(contador)     
    }

  }

  const agregarAlCarrito = () => {
    onAdd(contador);
  }

  return(
    <div>
      <div className=" row left text">Stock: {stock}</div>
      <article>{contador}</article>
      <div className="buttonCount">
        <button onClick={sumar}>
          <FontAwesomeIcon icon ={faPlus}/>
        </button>
        <button onClick={restar}>
          <FontAwesomeIcon icon={faMinus}/>
        </button>
        <button onClick={reset}>
          <FontAwesomeIcon icon={faPowerOff}/>
        </button>
        <br/><h2>{avisarStock}</h2>
        <button onClick={() => addProduct({...item, quantity: contador}) ||  agregarAlCarrito()} > Agregar al carrito </button>
      </div>
    </div>
  )
}

export default ItemCount;

ItemDetail (component father)

import React, { useState } from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css';
import Count from './ItemCount';
import { Link } from "react-router-dom";

export const ItemDetail = ({item}) => {  

  const [itemSell, setItemSell] = useState(false);
  
  
  const onAdd = (count) => {
    setItemSell(true);
  }
 
  return (
    <main className="itemsdetails">
      <div className="row" id= {item.id}>
        <div className="col s12 m6">
          <img src={item.image} alt="item" className="itemImg responsive-img"/>
        </div>
        <div className="col s12 m6">
          <div className="col s12">
            <h5 className="itemName">{item.title}</h5>
          </div>
          <div className="col s12">
          <p className="itemDescription">{item.description}</p>
          </div>
          <div className="col s12">
            <p className="itemPrice"> {item.price}</p>
          </div>
          <div className="col s12">
            {
              itemSell ? <Link to="/cart"><button className="waves-effect waves-light btn-large">Finalizar Compra</button></Link> : <Count item= {item} stockInitial={item.stock} onAdd= { onAdd } />
            }
          </div>
        </div>
      </div>
    </main> 
  )
};

export default ItemDetail;

Answer

<br/><h2>{avisarStock}</h2>

Here, you are trying to render a component, but actually avisarStock is a function which sets state and opens an alert. It makes no sense to try to render this function.

It would appear you meant to render stock not avisarStock. This would show your stock state in the <h2>:

<br/><h2>{stock}</h2>

Advertisement

Answer