React空白文本节点不能显示为的子级<tbody>

Question

I want to create table with crypto coins symbols but I get this error Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra whitespace between tags on each line of your source code. Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra whitespace between tags on each line of your source code.

import React, { Component } from 'react'

class Main extends Component {
    constructor(props) {
        super(props)

        this.state = {
            symbol: ''
        }
    }

    createTable(coins) {
    }
    getDataFromApi() {
        const url = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=market_cap_desc&per_page=50&page=1&sparkline=false'
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({
                    symbol: data.map(coin => {
                        return <tr key={coin.symbol}><td>{coin.symbol}</td></tr>;
                    })
                }, () => console.log(this.state.symbol))
            })
    }
    componentDidMount() {
        this.getDataFromApi()
    }
    render() {
        return (
            <div><table><tbody>{this.state.symbol}</tbody></table></div>
        )
    }
}

export default Main

It looks like I want it to but it throws this warning. In the end I want something like https://www.coingecko.com/en but obviously simpler :)

Answer 1

Found it. Problem was symbol state was initialy string I just converted it to array like so

this.state = {
            symbol: []
        }