Why can`t I assign the props to a constant and render it

Question

The parent component Display gives the props to the child component called GoodsPresentation.

import React, { Component } from 'react';
import GoodsPresentation from "./goodsPresentation/goodsPresentation";
import ShoppingCart from "./shoppingCart/shoppingCart.component";
import axios from 'axios';

class Display extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
      products:null
    }
  }

    componentDidMount() {
      
      axios.get( backend)
            .then( response => {
                  this.setState( {
                      products:response.data
                  });
                });
    }

  render() {
    
    return (
      <div>
        <GoodsPresentation productsArray={this.state.products? this.state.products : undefined} />
        <ShoppingCart/>
      </div>
      );
      
  }
}

export default Display;

This is forwardes as props: productsArray

That works very well.

Then I wanted to map the products Array (the props) and assign it to a constant called Data. Then I wanted to render the Data within the return method of the child component. This leads to the following error message:

I dont understand why it doesnt work. What am I doing wrong? (The commented out mapping under the Data tag works fine)

This is the GoodsPresentation Component:

import React, { Component } from 'react';
import Table from 'react-bootstrap/Table';

class GoodsPresentation extends React.Component {
  
  constructor(props){
    super(props);
    }

    componentDidMount() {
    }
    
  render() {

   const Data = this.props.productsArray != undefined ? this.props.productsArray.map(
      (item,index)=>{
        return (
        <p>Works</p>
       )           
       }  
)
    :null;

    
    return (

      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <Data/>
        {/* {this.props.productsArray != null ? this.props.productsArray.map(
                 (item,index)=>{
                   return (
                   <p>Works</p>
                  )           
                  }  
          )
               :null} */}
         
        </tbody>
      </Table>
    

   
      );
      
  }
}


export default GoodsPresentation;

Answer 1

EDIT i didnt look at your code good enough i guess. The problem is the <Data /> component. Change that to {Data}