score:1
the reason behind .map()
is you get an opportunity to manipulate your array elements by accessing each elements and returning a different way, structure. in react case it helps to render proper jsx elements for render()
method. suggested read lists and keys from react's official documentation.
read from array.prototype.map()
documentation:
the
map()
method creates a new array populated with the results of calling a provided function on every element in the calling array.
first issue is wrongly passed properties to setstate()
, please note that i'm using :
instead of =
. try to change as the following:
this.setstate({
isload: true,
items: json,
});
additionally you can try the following - you had the same name for current element as the array itself - it just better to have different name:
return <div>
<ul>
{items && items.map(e => <li key={e.name}> {e.name} </li>)}
</ul>
</div>
i hope that helps!
Source: stackoverflow.com
Related Query
- Problem with loading JSON file in React Router
- React JS - webpack throws error with loading JSON file
- Problem with loading images from a javascript file in react
- loading json data from local file into React JS
- Write to a text or JSON file in react with node
- react-i18next not loading json translation files in React app created with create-react-app
- How to import Json file with React lazy loading?
- Loading JSON file into React Component state | Wepback2
- Django static file serving in conflict with React Router
- How can I access a local JSON file with Redux to use throughout my React app?
- Loading local JSON file in React for dynamic content
- Problem rendering Component in a different page with React Router
- How to open a File on a specific route with React Router
- Avoid loading data passed as props with React Router
- Create react app with i18next - load translations from json file
- problem with react router dom v6 subroutes
- React ajax request with multipart file and json data
- Loading images based on JSON file react
- Problem with React Router v6 - Showing a blank page
- React Router Dom rendering route error with loading components
- Finding values or objects in a json file with nested objects and passing the result object to child in Javascript and react
- How to solve this problem ? PrivateRoute with React Router v6
- Problem with react router link and nested routing
- React problem with router before fetching the user
- Lazy loading with react router v6 beta
- React app not loading js file when accessing it with a non home page url
- Import JSON file in React with data format error
- Local json file is not loading using ajax in react js
- Problem with import json to variable in React
- React Router Dom Problem on Build, im always getting my main page. I already tried with exact
More Query from same tag
- How to get the headers of a reponse in a fetch request?
- Access-Control-Allow-Origin error on axios request even after enabling express CORS middleware
- How to call redux-saga action continuously after every 60 seconds
- @withRouter Unexpected Token Error
- React App - My alert window is showing up twice
- Change value in react js on window resize
- React Leaflet Not Showing Map Correctly
- React.js: How do you change the position of a Component item
- How do you reference a process.env variable in HTML <script src="" ? React
- Chart JS - Change the color of the last element in a Bar Chart
- Custom API layer in React
- How to add authentication using JWT on a React app?
- React Material-Table, How to bind data that is obtained remotely?
- Simply extract analytical data from Spotify API
- Openlayers draw poylgon remove double click option
- How to render activeClassName style for a react-router-dom NavLink rendered within a material-ui button in a typescript environment?
- Add new items to existing object model react js
- Access a variable defined in a CommonJS library from the global browser scope
- Getting this.props is not function when passes function to child React
- react-router redirect doesn't change url in Switch
- Why I can't use an imported component inside a functional component in React?
- How do get input name changed with material-ui-pickers
- React router CSS for all routes
- Adding a custom bootstrap component in react-ui-bootstrap builder
- React Js multiple buttons
- what's the right way to remove dynamic DOM Nodes from an event handler in React?
- Why isn't a state variable displaying in a header but a constant is?
- Npm run build cannot find required file?
- How could I go about implementing pagination to my project
- react-hook-form version 7 validation errors not working