Objects are not valid as a React child (found: object with keys). If you meant to render a collectio-CodePudding

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?

CodePudding user response：

Your response as you see is an array of objects.You must loop throw via this array to display the data corrently 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.