Cannot get a data on the table using react js

I developed a table with reactjs and I want to get the data and appears it on this table.

The data appears on the console but it doesn't appears on the table.

My code is :

    constructor(props){
                super(props);
                this.state = {
                    categories: [],
                    file:''};
                  this.onchange = this.onchange.bind(this)
                  this.handleAdd = this.handleAdd.bind(this);
            }
            componentDidMount() {
                axios({
                  method: 'get',
                  url: 'http://172.16.234.24:8000/api/allCategories',
                 headers: {
                'Cors-Allow-Credentials':true,
                'Access-Control-Allow-Credentials':true,
                'Access-Control-Allow-Origin': '172.16.234.24:8000',
                'Access-Control-Allow-Headers':'Content-Type, 
                Authorisation',
                'Content-Type': 'multipart/form-data'
                }
                }).then(response => {
                try { if (response && response.data) {
                    this.setState({ categories: response.data});
                    console.log(response)
                  }
               console.log(this.state.categories)
                }
                catch(error)
                {console.log('noo')}

                }).catch(error => console.log(error));
              }
            handleAdd() {
                try {
                  console.log("Add Categorie")
                  this.props.history.push('/addcategorie');
                }
                catch (error) {
                  this.setState({ error });
                }
              }
            render() {
              let {
                categories
            } = this.state;
                return (
                    <div>
           <Table><thead><tr>
                                  <th scope="col">Name</th>
                                  <th scope="col">Photo</th>
                                </tr>
                              </thead>
                              <tbody>{categories.length && this.state.categories.map(categorie =>  (
                        <tr key={categorie.id}>
                <td>{categorie.name}</td>
                <td>{categorie.file}</td>
                 </tr>
                              ))} </tbody>
                            </Table> 
                    </div>

when I run it I get index.js:1446 Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>. and I get the data on the console but my table is empty.

How to fix it ?

Solution

You have some white spaces between tbody starting and ending tag

Just replace below code as it is and try

   <tbody>{categories.length && categories.map(categorie =>  (
        <tr key={categorie.id}>
            <td>{categorie.name}</td>
            <td>{categorie.file}</td>
             </tr>
        ))}</tbody>

It might seem silly, but you're actually rendering the tbody and some whitespace (i.e. text).

To be more clear

Change

   ))} </tbody>

  ))}</tbody>