React JS: Unable to display array data onClick - arrays

Question

In the console i can see the object inside the array on click every time.
But I am unable to display it
I tried map() instead of forEach, and it shows the item just once.
I need it to show each time i click the button
Can someone tell me what I am doing Wrong?
import React, { Component } from 'react'
export default class App extends Component {
state = {
isClicked : false
}
handleClick = () => {
this.setState({
isClicked : true
})
}
render() {
let myarray = [ ]
let myobject = {
color: 'blue',
shape: 'round'
}
myarray.push(myobject)
let looped = myarray.forEach((data) => <><h1>{data.color}</h1> <h1>{data.shape}</h1></>)
console.log(myarray)
return (
<div>
<button onClick={this.handleClick}>Submit</button>
{ this.state.isClicked ? looped : null}
</div>
)
}
}
I want the object to display on the page when I click the button

Answer 1

There are some issues in your snippet:
forEach() has no return value.
on handleClick you change state to isClicked: true once.
In order to fix your code and display your data on every click you should:
Use map() to map each object to React.Element.
Change the state on every button click, so in your case, on every click, you should reverse the boolean value of this.state.isClicked.
Here is a working example:
import React from 'react';
const myArray = [
{
color: 'blue',
shape: 'round'
}
];
const looped = myArray.map((data, i) => (
<div key={i}>
<h1>{data.color}</h1> <h1>{data.shape}</h1>
</div>
));
export default class App extends React.Component {
state = {
isClicked: false
};
handleClick = () => {
this.setState(prevState => {
console.log(prevState);
return { isClicked: !prevState.isClicked };
});
};
render() {
return (
<div>
<button onClick={this.handleClick}>Submit</button>
{this.state.isClicked && looped}
</div>
);
}
}