validateDOMNesting(...)：文本节点不能作为子节点出现

Question

i don't know why i'm receiving this warning? and because of this i can't see updated table..

Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>.

In some cases I saw that it is about some white spaces and different table tags, but I don't see how this applies in here.

TableCom

import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
import React from 'react'

export const Countries = ({details}) => {
    return (
        <TableContainer component={Paper}>
            <Table aria-label="simple table">
                <TableHead>
                    <TableRow>
                    <TableCell align='right'>Country</TableCell>
                        <TableCell align='right'>Total Infected</TableCell>
                        <TableCell align='right'>Total Recoverd</TableCell>
                        <TableCell align='right'>Total Deaths</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {details.length && details.map((detail) => {
                        return (
                      <TableRow>
                          <td key={detail.id}>{detail.cases}</td> : null
                      </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </TableContainer>
    )
}

App.js for state and passing props

import React, { useEffect, useState } from 'react'
import { Appbar } from './components/pageOne/Appbar'
import { Cards } from './components/pageOne/Cards'
import { fetchData, fetchCountries } from './components/FetchDataFromApi'
import { Countries } from './components/pageOne/TableCom'

function App() {
  const [data, setData] = useState({})
  const [details, setDetails] = useState([])

    useEffect(() => {
      (async () => {
        const fetchAPI = await fetchCountries();
        setDetails(fetchAPI)
      })()
      }, []);

  useEffect(() => {

    (async () => {
      const fetchedData = await fetchData();
      setData(fetchedData)
      
    })()
  }, [])

  return (
    <>
    <Appbar />
    <Cards data = {data} />
    <Countries details = {details} />
    
    </>
  )
}

export default App;

any solution to solve this... codeSandBox

Answer 1

The problem is in the way you handle the response which you're getting from the api. You're returning an object instead of an array.

https://codesandbox.io/s/silly-dan-7iusu

Here is a working sandbox, I just get all the data from the response and pass it down. You can also create an array yourself, only with the data you need. But currently you're passing an object.

Look at index.js in fetchApi .