How to print Array in react Component

Question

I want print Array in react Component thats component i am using from array. But getting error Cannot find name 'row'. i am usign react with material-Ui. am using react with react material-Ui. Here i am getting error " const suggestions = this.state.searchArray.data.map((row) => { return row.symbol; });

import React, { Component } from 'react';
import Autocomplete from "./Autocomplete";
import { render } from "react-dom";
import ApiService from "../../service/ApiService";
const style = {
    flexGrow: 1
}



export class SearchScripComponent extends Component<any,any> {
  constructor(props: any){
    super(props);
    this.state ={
        searchArray:[],
        message: null
    }
    this.searchScripData = this.searchScripData.bind(this); 
}

componentDidMount() {
  this.searchScripData(this.requesDATA2());
}

requesDATA2()
{
   let data1= { "symbolOrName":"TATA"};
   return data1;
}

searchScripData(searchScrip: any) {
  ApiService.searchScripDataList(searchScrip)
      .then((res) => {
         this.setState({searchArray: res.data.data} )
      });

}
  render() {
    return (

<div>
const suggestions = this.state.searchArray.data.map((row) => {
    return row.symbol;
  });

<Autocomplete  suggestions={suggestions}/>
    </div>
    );
  }
}

export default SearchScripComponent;

What i want

<Autocomplete  suggestions={row.symbol}/>

my API DATA

{
    "statusCode": 200,
    "message": "SUCCESS",
    "data": [
        {
            "scripId": 299,
            "symbol": "TATAGLOBAL"
        },
        {
            "scripId": 520,
            "symbol": "TATAYODOGA"
        },
        {
            "scripId": 1195,
            "symbol": "TATASPONGE"
        },
        {
            "scripId": 30,
            "symbol": "TATASTLBSL"
        }
    ]
}

Hey ram, your question is not clear, in what you are using now you have an array of strings and in what you wanna achieve you are trying to access the symbol key that does not exist. could you please explain more. — Farhani Walid
– Farhani Walid, Commented May 19, 2020 at 2:41
@FarhaniWalid i want print array data this here <Autocomplete suggestions={row.symbol}/> — ram krishmal
– ram krishmal, Commented May 19, 2020 at 2:46
@FarhaniWalid now i am getting data here <div> {this.state.searchArray.map((row: any) => ( <div>{row.symbol}</div> ))} </div> — ram krishmal
– ram krishmal, Commented May 19, 2020 at 2:47

Farhani Walid · Accepted Answer · 2020-05-19 04:37:02Z

2

Based on the api call you are iterating over the object that does not have a symbol proprety, so in your case you just need to change your map function like that

  const suggestions = this.state.searchArray.data.map((row) => {
    return row.symbol;
  });

<Autocomplete  suggestions={suggestions}/>

UPDATE

This is the working code

import React, { Component } from "react";
import Autocomplete from "./Autocomplete";
import { render } from "react-dom";
import ApiService from "../../service/ApiService";
const style = {
  flexGrow: 1,
};

export class SearchScripComponent extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      searchArray: [],
      message: null,
    };
    this.searchScripData = this.searchScripData.bind(this);
  }

  componentDidMount() {
    this.searchScripData(this.requesDATA2());
  }

  requesDATA2() {
    let data1 = { symbolOrName: "TATA" };
    return data1;
  }

  searchScripData(searchScrip: any) {
    ApiService.searchScripDataList(searchScrip).then((res) => {
      this.setState({ searchArray: res.data.data });
    });
  }
  render() {
    suggestions = this.state.searchArray.map((row) => {
      return row.symbol;
    });
    return <Autocomplete suggestions={suggestions} />;
  }
}

export default SearchScripComponent;
``

edited May 19, 2020 at 4:37

answered May 19, 2020 at 3:12

Farhani Walid

9481 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ram krishmal Over a year ago

now i am getting error Line 43:4: Parsing error: Expression expected i update my code in question please check whole code

Farhani Walid Over a year ago

you were declaring the const inside the return function, you had to declare it before it... i have updated my answer with the working code

ram krishmal Over a year ago

Sorry for but now getting error TypeError: Cannot read property 'map' of undefined. really thank you

Farhani Walid Over a year ago

ApiService is a function that will call the api to get the data from there when the user start typing on the autocomplete input ? ?

Farhani Walid Over a year ago

ah okey because you had already accessed the data property here this.setState({ searchArray: res.data.data }); glad that this worked :)

|

Collectives™ on Stack Overflow

How to print Array in react Component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related