I'm having a problem, where I need to return some parameters that I called in a foreach that I created, but when I call this function it doesn't return anything

import React, { useState, useEffect } from 'react';
/* Styles */
import styles from './styles.css'

export default function PalleteMeasurement(){
  const [click,setClick] = useState(false)
  const [data,setData] = useState([])

  const clickButton = () =>{
    setClick(!click)
  }

  useEffect(() => {
    fetch('/api/dataentities/SC/search?_where=categoryName=Sandalia&_fields=categoryName,size01,size02,size03,size22,size22e23,size23,size23e24,size24,size24e25,size25,size25e26,size26,size26e27,size27,size27e28,size28,size28e29,size29,size29e30,size30,size30e31,size31,size31e32,size32,size32e33,size33,size33e34,size34,size34e35,size35,size35e36,size36,size36e37,size37,size37e38,size38,size38e39,size39,size39e40,size40,size40e41,size41,sizeUN')
    .then((res) => res.json())
    .then((data) => {
      setData(data)
    })
    .catch((err) => {
      console.log('Dados não encontrados:',err)
      return false
    });

  }, [])

  const  dataMetricas = () => {
    let keys = Object.keys(data[0]).filter(value => value.includes('size'));

    return   keys.forEach(function (value) {
        if (data[0][value] != null) {
          const metricasCM = data[0][value]/10
          const textHead = value.replace('size','').replace('e', '/')
          {
          <div className={styles.box}>
              <div className={styles.tamanho}>
                <span>{textHead}</span>
              </div>
              <div className={styles.tamcm}>
                <span>{metricasCM} cm</span>
              </div>
          </div>
          }

        }
      })
  }
  return(
    <>
      <div className={styles.palletGuide}>
        <h5>Guia de tamanhos aproximados</h5>
        <div className={styles.buttonExtended} >
            <div className={styles.buttonImage} onClick={clickButton}></div>
        </div>
        {
          click ?
        <div className={styles.containerTamanhos}>
          <>
          {dataMetricas()}
          </>
        </div> 
        : null
        }

      </div>
    </>
  )
}

I don't know if I need to add one more parameter to the function or I'm calling it wrong, but at the moment, I have no idea what it could be Can you help me ?

CodePudding user response：

forEach does not return a new array, u need to use map function to get an return, try this and tell me if works. see this for more info https://code.tutsplus.com/tutorials/javascript-map-vs-foreach-when-to-use-each-one--cms-38365

CodePudding user response：

forEach doesn't return anything you mean to use map like this:

const  dataMetricas = () => {
let keys = Object.keys(data[0]).filter(value => value.includes('size'));

    return keys.map(value => {
        if (data[0][value] != null) {
          const metricasCM = data[0][value]/10
          const textHead = value.replace('size','').replace('e', '/')
          return (
            <div className={styles.box}>
              <div className={styles.tamanho}>
                <span>{textHead}</span>
              </div>
              <div className={styles.tamcm}>
                <span>{metricasCM} cm</span>
              </div>
            </div>)
        }
      })
  }

let me know if this helps