title: Passing props within stateless functional components
body: <p>I have the father which is Productos and a child called EditarProductos. I want to pass producto.id to EditarProductos.</p>
  
  <p>Here is Productos:</p>
  
  <pre><code>import {Button, TableHead, TableRow, TableCell, TableBody, Table} from '@material-ui/core'
  import { withStyles, makeStyles } from '@material-ui/core/styles';
  import InsertarProductos from './InsertarProductos';
  import Grid from '@material-ui/core/Grid';
  import EditIcon from '@material-ui/icons/Edit';
  import DeleteIcon from '@material-ui/icons/Delete';
  import EditarProductos from './EditarProductos';
  
  const StyledTableCell = withStyles((theme) =&gt; ({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    },
    body: {
      fontSize: 14,
    },
  }))(TableCell);
  
  const StyledTableRow = withStyles((theme) =&gt; ({
    root: {
      '&amp;:nth-of-type(odd)': {
        backgroundColor: theme.palette.background.default,
      },
    },
  }))(TableRow);
  
  function Productos(props) {
      const [productos, setProductos] = useState([]);
      var id='';
  
      useEffect(() =&gt; {
  
  
        const getProductos = async () =&gt; {
          const res = await fetch("/productos", {
              method: 'GET',
              headers: {'Content-Type': 'application/json'},
          })
          //console.log(res);
          const response = await res.json();
          setProductos(response);
        }
        getProductos();
      })
  
      function editar(producto){
        console.log("entro 1");
        //console.log(producto.id);
        id = producto.id;
        console.log(id);
        return &lt;EditarProductos productoEdit = {id}/&gt;;
      }
  
      function eliminar(producto){
        console.log(producto.id);
        id=producto.id;
        deleteProductos();
        window.location.reload();
      }
  
      const deleteProductos = async () =&gt; {
        console.log("entro");
        console.log(id);
        const res = await fetch("/productos", {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              id: id
            })
        })
        const response = await res.json();
      }
  
      const useStyles = makeStyles({
        table: {
          minWidth: 700,
        },
      });
      //console.log(plot);
  
      const mystlye = {
        minWidth: "50%",
        minHeight: 50
      };
  
      //
      const classes = useStyles();
      return (
        &lt;div&gt;
  
        &lt;br /&gt;
          &lt;Grid container spacing={3}&gt;
          &lt;Grid item xs={3}&gt;&lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;&lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;&lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;
           &lt;InsertarProductos productoInsert="fer"/&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
        &lt;br /&gt;
          &lt;Table className={classes.table}&gt;
            &lt;TableHead&gt;
              &lt;TableRow&gt;
                &lt;StyledTableCell&gt;ID&lt;/StyledTableCell&gt;
                &lt;StyledTableCell&gt;Nombre&lt;/StyledTableCell&gt;
                &lt;StyledTableCell&gt;Precio de Compra&lt;/StyledTableCell&gt;
                &lt;StyledTableCell&gt;Precio de Venta&lt;/StyledTableCell&gt;
                &lt;StyledTableCell&gt;Cantidad&lt;/StyledTableCell&gt;
                &lt;StyledTableCell&gt;Categoria&lt;/StyledTableCell&gt;
                &lt;StyledTableCell&gt;Extras&lt;/StyledTableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableHead&gt;
            &lt;TableBody&gt;
              {productos.map((producto) =&gt;
                &lt;TableRow className="data-row"&gt;
                  &lt;StyledTableCell&gt;{producto.id}&lt;/StyledTableCell&gt;
                  &lt;StyledTableCell&gt;{producto.nombre}&lt;/StyledTableCell&gt;
                  &lt;StyledTableCell&gt;{producto.precio_compra}&lt;/StyledTableCell&gt;
                  &lt;StyledTableCell&gt;{producto.precio_venta}&lt;/StyledTableCell&gt;
                  &lt;StyledTableCell&gt;{producto.cantidad}&lt;/StyledTableCell&gt;
                  &lt;StyledTableCell&gt;{producto.categorias_id}&lt;/StyledTableCell&gt;
                  &lt;StyledTableCell&gt; 
                  &lt;Button variant="outlined" onClick={() =&gt; editar(producto)}&gt;
                    &lt;EditIcon /&gt;
                  &lt;/Button&gt;
                  &lt;Button variant="outlined" onClick={() =&gt; eliminar(producto)} &gt;&lt;DeleteIcon /&gt; &lt;/Button&gt;
                  &lt;/StyledTableCell&gt;
                &lt;/TableRow&gt;
              )}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
      );
  }
  
  export default Productos;
  </code></pre>
  
  <p>If I try to pass the id inside the button, it starts to print the id multiple times like in a loop.</p>
  
  <p>EditarProductos is never reached and the id isn't passed. Could someone help me fix my problem, please?</p>
  
  <p>PD: In EditarProductos I'm trying to print id like this:</p>
  
  <pre><code>console.log(props.productoEdit);
  </code></pre>