score:0
you don't need newarr
.
const[books, setbooks] = usestate([]);
is already specifying books
in it. use it to map over the items.
also, if get books is an asynchronous call. you can do a ternary to render null
when the array is empty. this will prevent the initial loop with empty values in your markup and providing more checks on something like book.name
which results in name
of undefined errors.
like this
books ? books.map(book => {}) : null;
score:0
you need to return your element after mapping your array otherwise it will not render.
import react, { useeffect, usestate } from 'react';
import "./app.css";
function app() {
const[books, setbooks] = usestate([]);
useeffect(() => {
fetch(`https://api.nytimes.com/svc/books/v3/lists/best-sellers/history.json?api-key=${your_api_key}`,{
method: "get"
})
.then(res=>res.json())
.then(res=>setbooks(res.results))
.catch(err=>console.log(err));
},[]);
return (
<div classname="content_books">
{books.map((item, index) => <div
key={index}
classname="card">
<img src="https://s1.nyt.com/du/books/images/9780553897845.jpg" classname="card-img-top" alt="game of thrones" />
<div classname="card-body">
<h5 classname="card-title">{item.title}</h5>
<p classname="card-text">{item.description}</p>
<a href="#" classname="btn btn-primary">buy</a>
</div>
</div>
)}
</div>
);
}
export default app;
score:0
you must know how lambda functions works.
if you are using {}
you have to use return
, because this is block of code:
new arr.map(item => {
return (
<div>{item}<div>
);
}
but lambda functions without {}
by default use return statement:
new arr.map(item => (
<div>{item}<div>
);
Source: stackoverflow.com
Related Query
- Array state is disappeared when array mapping
- How to re-render react component when mapping over state that is array of objects
- React - Dealing with undefined state when mapping over an array of objects from API
- Updating state inside nested array when mapping the parent
- React: Updating state when state is an array of objects
- How to specify a key for React children when mapping over an array
- Unexpected token (,) when mapping an array in ReactJS
- How to create an image background fade when mapping an array of images with React
- React State update a nested array with objects based on the id when iterated
- How to target single item in list with onClick when mapping JSON array in React
- ReactJS component state is not updating when any value in state array is modified
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- Render a button (when hovered) for only one element of an array, when mapping an array
- React: Each child in an array or iterator should have a unique "key" prop when Mapping custom components
- An error comes when mapping array of objects in React
- How to update specific value when the state is an array of objects - React
- How to filter array & update state when every click in React
- Why state doesn't keep all the data in Array state in hook when it updated in foreach?
- React App becomes blank when I try to update an array in the state
- React - unique key in object gets overwritten when updating state array
- Compare current to previous when mapping array of objects onto html elements
- Mapping array objects and updating state variable. data is lost
- How can i only re-render the new child component when mapping an array from Redux state?
- When accessing props of a component "this" is unedefined after mapping state to props
- React JS mapping an array inside a state array
- Cannot read properties of undefined (reading 'map') mapping issue when array is empty
- React jsx array component does not re-render when state changes
- Create a unique key when mapping over array of objects
- How to solve undefined error when trying to access a nested array in a React state variable?
- Why is my state array variable being treated as "pass-by-reference" and mutated when I use it as a parameter to another function?
More Query from same tag
- How to display the date and time that is in the country in the React Date Picker?
- React.useContext is undefined
- React - Call parent method from within child component
- Build React Components Incrementally based on conditions
- I got Type-errors while converting my Slice.js file to ts (redux tool kit)
- how to correctly setState in the reactjs function
- Meteor, react, this.props.children shows nothing
- react state is not updated/passed to child component when child component is passed as a property
- Dynamically create or modify objects within a object
- Fetching data from API failed
- setState in functional component don't keep value
- How to add bootstrap to sharepoint spfx webpart?
- How to make React listen to event in Child component first instead of Parent component?
- Recommended ways to build a responsive table
- Functions inside componentDidMount are undefined
- React Router: Show progress while loading
- Rendering Parameterized Function Results
- In React-Router-Dom how do I go to another page while also going to an id
- Keep user after logIn with Firebase
- Difference between React Component and React Element
- Can I Set Initial State with Props in React + Redux?
- Passing data to another after receiving data from call back in react js
- TailwindCSS and React Not Correctly Importing JSX Elements
- Material-UI: the value provided `undefined` is invalid
- How to prevent non-browser clients from sending requests to my server
- How can I utilise ApplicationInsights-JS in a service worker?
- Module not found: Can't resolve 'react-bootstrap/Panel' in 'F:\CFC\aaa\src\components\Login'
- Forms validation condition With react
- React + Router + Google Tag Manager
- React Router Link not refreshing page