Componente padre:
<Tabs activeKey={key} onSelect={(k) => setKey(k)} className="common-tab-wrap" > {commentsData?.map((item, index) => ( <Tab key={index} eventKey={`${item.industry}`} title={`${item.industry}`} > {item.industry === key && ( <ConversionMetricsForm title={`${item.industry}`} /> )} </Tab> ))} </Tabs>Componente hijo:
const ConversionMetricsForm = ({ title }) => { const { conversionMetricList } = useSelector( (state) => state?.conversionMetrics ); const filteredData = useMemo(() => { const tempData = conversionMetricList?.data?.filter( (item) => item.industry === title ); return JSON.parse(tempData[0].jsondata); }, [title]); ... <tbody> <tr> {filteredData && filteredData?.map((item) => { <td> <ul className="rate-ul list-inline"> <li className="list-inline-item"> <Form.Group className="num-group"> <Form.Control type="number" value={item.avg_CPA_GDN} /> </Form.Group> </li> </ul> </td>; })} </tr> </tbody> ... };Los datos provienen del componente principal que también podemos ver en la consola, pero no se representan de la misma manera en el componente secundario y no muestra nada.
Sugiera dónde debo escribir la lógica en el componente secundario para mostrar datos
Como se sugiere en la otra respuesta, debe agregar la declaración de devolución en la función de devolución de llamada que pasa a la llamada .map() debido a la sintaxis de llaves.
filteredData?.map((item) => { return ( <td> ... </td> ); })Alternativa, puede usar la sintaxis sin llaves y usar paréntesis en su lugar
filteredData?.map((item) => ( <td> ... </td> )) Otro problema que afecta el resultado es la matriz de dependencias en su enlace useEffect. Debe agregar todas las variables que está usando dentro; en este caso, falta conversionMetricList .
}, [title, conversionMetricList]);solo necesita escribir retorno antes de la etiqueta td.