React js Unhandled Rejection (TypeError): t[l].data.map is not a function

Question

I try to display my graph dynamically but I had this error mention in the title how to assign the values returned by axios to the data in series , the requete axiose return just one value with JSON format using spring boot please help me to resolve this error and display the graphe line , column dynamically this is my code

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

      this.state = {
      
        series: [{
          name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
          type: 'column',
          data: 1
        }, {
          name: ' WON  count RFP ID / SAM ID',
          type: 'line',
          data: 2
        }],
        options: {
          chart: {
            height: 350,
            type: 'line',
          },
          stroke: {
            width: [0, 4]
          },
          title: {
            text: 'Traffic Sources'
          },
          dataLabels: {
            enabled: true,
            enabledOnSeries: [1]
          },
          labels: [''],
          xaxis: {
            type: 'text'
          },
          yaxis: [{
            title: {
              text: ' ATOS PFE EL MANDOUR AMINE',
            },
          
          }, {
            opposite: true,
            title: {
              text: 'Social Media'
            }
          }]
        },
      
      
      };
    }
    async componentDidMount(){
      this.state = {brand: []};
      axios.get("http://localhost:8080/designe/grapheone")
      .then(response => response.data)
      .then((data) =>{
        this.setState({brand : data})
      
      })
      
    
    }
    async componentDidMount(){
      this.state = {brandd: []};
      axios.get("http://localhost:8080/designe/grapheoneone")
      .then(response => response.data)
      .then((data) =>{
        this.setState({brandd : data})
      
      }
      
    
    
      )
    
      
      
      this.setState = {
      
        series: [{
          name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
          type: 'column',
          data: this.state.brand
        }, {
          name: ' WON  count RFP ID / SAM ID',
          type: 'line',
          data: this.state.brandd
        }]  
      }  
    }

Answer 1

You can await your axios calls in componentDidMount and then use the data to set the series in your state:

async componentDidMount() {
  const response1 = await axios.get("http://localhost:8080/designe/grapheone")
  const response2 = await axios.get("http://localhost:8080/designe/grapheoneone")

  const brand = response1.data
  const brandd = response2.data
      
  this.setState({
    series: [{
      name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
      type: 'column',
      data: brand
    }, {
      name: ' WON  count RFP ID / SAM ID',
      type: 'line',
      data: brandd
    }]  
  })  
}

For better performance, you can use axios.all to send both axios requests in parallel:

async componentDidMount() {
  const responses = await axios.all([
    axios.get("http://localhost:8080/designe/grapheone"),
    axios.get("http://localhost:8080/designe/grapheoneone")
  ])

  const brand = responses[0].data
  const brandd = responses[1].data
      
  this.setState({
    series: [{
      name: 'WON Sum Item_Tcv / Item_Tcv_Euro',
      type: 'column',
      data: brand
    }, {
      name: ' WON  count RFP ID / SAM ID',
      type: 'line',
      data: brandd
    }]  
  })  
}

You should also consider handling errors using try/catch.