I am triying to return p in a div from an array that come from a useState hook, but give me this error:Uncaught TypeError: Cannot read properties of undefined (reading 'items')
function App(){
const [items, setLab] = useState(["a", "b", "c"])
console.log(items)
return (
<div> laberinto
{this.items.bind(this).map((item) => {
<div>
<p>{item}</p>
</div>
})
}
</div>
)
}
render(
<App/>,
document.getElementById('app'),
);
Your App component is a functional component (not a class component), so you don't need to use this keyword.
{items.map((item) => {
<div>
<p>{item}</p>
</div>
})
}
More detailed about Functional and Class components here: https://reactjs.org/docs/components-and-props.html#function-and-class-components
this is simply undefined in React function components.Array.prototype.map callback needs to return a value being mapped to.this references..map callback. Don't forget to include the React keys.Explicit return statement in the function body:
function App() {
const [items, setLab] = useState(["a", "b", "c"]);
return (
<div>
laberinto
{items.map((item) => {
return (
<div key={item}>
<p>{item}</p>
</div>
);
})}
</div>
);
}
Implicit return without a function body:
function App() {
const [items, setLab] = useState(["a", "b", "c"]);
return (
<div>
laberinto
{items.map((item) => (
<div key={item}>
<p>{item}</p>
</div>
))}
</div>
);
}