CODEWITHSUNDEEP
arraysreactjsobjectchildren
Audrey Wong
Audrey Wong

Reputation: 69

Objects are not valid as a React child (found: object with keys). If you meant to render a collection of children, use an array instead

constructor(props) {
        super(props);
        this.state = {
            message: []
        };
    }

    async getData() {
        await axios.get("https:...")
        .then((response) => {
            console.log((response));
            console.log(typeof(response)); // object
            const convertString = JSON.parse(response.data.body);
            this.setState({message: convertString});
            console.log(convertString));
        })
    }

    componentDidMount() {
        this.getData();
    }

    render() {
        const obj = (this.state.message);
        console.log(obj);
        return(
            <div>
                {this.state.message}
            </div>
        )

I get the error: "Error: Objects are not valid as a React child (found: object with keys {Items, Count, ScannedCount}). If you meant to render a collection of children, use an array instead."

console.log(convertString) gives me this:

Items: Array(4)
0: {key1: "value", key2: "value"}
1: {key1: "value", key2: "value"}
2: {key1: "value", key2: "value"}
3: {key1: "value", key2: "value"}

How should I pass the data via this.setState() if I want to render the array in a table format?

Upvotes: 2

Views: 26373

Answers (1)

Manfre
Manfre

Reputation: 696

Your response as you can see is an array of objects.You must loop throw via this array to display the data currently for example:

render() {
  return(
    <div>
        {this.state.message.map((item,i) => (
          <div key={i}> 
            <div>{item.key1}</div>
            <div>{item.key2}</div>
          </div>
        )}
    </div>
  )
}

on {this.state.message.map} method you loop throw inside your message array ( contains 4 objects } and every (item) has the properties that you want to display.

Upvotes: 1

Related Questions