<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React; const { render } = ReactDOM; const [array, setArray] = useState(['Banana', 'Apple', 'Mango', 'Grapes', 'Water Melon']);
const [result, setResult] = useState(''); const myFunction = () => { array.forEach((item, index) => { setResult(prevResult => prevResult + "<p>Index[" + index + "] = " + item + "</p>");
<h3>React forEach loop Function</h3>
<p>React Js Display Array Item</p>
<button onClick={myFunction}>click me</button> <div dangerouslySetInnerHTML={{ __html: result }}></div> render(<App />, document.getElementById('app'));