I re-organized your code a bit to work as a functional component. As others were commenting, you need to use state to re-render your components on updates. I removed count since .map allows for indexing.( you can add it back as a variable inside TaskFunction if you deem necessary )
W3 School's example works because they are not updating state. They have a list that is pre-set with values and render those values.
Lastly, your map function need to 'return' the element. As in the w3 school's example, map returns the Car component. So what you had was a little mixed up.
Hope this helps.
function App() {
const [tasks, setTasks] = React.useState([])
const generateValue=()=>{
let someValue = Math.random() *10
let newValue = {value: someValue}
setTasks([...tasks, newValue])
}
return (
<div>
<button onClick={()=>{generateValue()}}>Add New Item</button>
<h1>List</h1>
<ul>
{tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
</ul>
</div>
)
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />)
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>
In a comment you ask to see the state example using the old style class components -
class App extends React.Component {
state = {
tasks: []
}
generateValue = () => {
let someValue = Math.random() *10
let newValue = {value: someValue}
this.setState({ tasks: [ ...this.state.tasks, newValue ] })
}
render() {
return (
<div>
<button onClick={this.generateValue}>Add New Item</button>
<h1>List</h1>
<ul>
{this.state.tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
</ul>
</div>
)
}
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />)
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>
Without public class fields -
class App extends React.Component {
constructor() {
super()
this.state = {
tasks: []
}
}
generateValue() {
let someValue = Math.random() *10
let newValue = {value: someValue}
this.setState({ tasks: [ ...this.state.tasks, newValue ] })
}
render() {
return (
<div>
<button onClick={this.generateValue.bind(this)}>Add New Item</button>
<h1>List</h1>
<ul>
{this.state.tasks.map((task, index)=>(<li key={index}>{task.value}</li>))}
</ul>
</div>
)
}
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />)
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>
Answer from amandarose on Stack OverflowHaving problem with Array.map() in React when I try to print all array items in unordered list
reactjs - Map over an array in React - Stack Overflow
React - Use Array.map() to Dynamically Render Elements - .map is different than in js
Rendering an array.map() in React - javascript
Per W3Schools:
map() creates a new array from calling a function for every array element.
map() calls a function once for each element in an array.
map() does not execute the function for empty elements.
map() does not change the original array.
This creates an array of names from an array of platform objects, such as results.platforms in the json snippet you showed.
platforms.map(platform => <span>{platform.platform.name}</span>)
If you map over the platform after taking that part to the variable called platforms in your code then you can map over it like I shown below:
<div className="text-gray-800 text-center font-mono py-2">
{platforms ? platforms.map((item) => <span key={item.platform.id}>
{item.platform.name}
</span>) : null }
</div>
Don't forget to insert the key inside the span tag. Which will act as a unique identifier for each span tag.
reference: Lists and Keys
Gosha Arinich is right, you should return your <li> element.
But, nevertheless, you should get nasty red warning in the browser console in this case
Each child in an array or iterator should have a unique "key" prop.
so, you need to add "key" to your list:
this.state.data.map(function(item, i){
console.log('test');
return <li key={i}>Test</li>
})
or drop the console.log() and do a beautiful oneliner, using es6 arrow functions:
this.state.data.map((item,i) => <li key={i}>Test</li>)
IMPORTANT UPDATE:
The answer above is solving the current problem, but as Sergey mentioned in the comments: using the key depending on the map index is BAD if you want to do some filtering and sorting. In that case use the item.id if id already there, or just generate unique ids for it.
You are not returning. Change to
this.state.data.map(function(item, i){
console.log('test');
return <li>Test</li>;
})