score:1
Accepted answer
you need to have another .map()
;
<div classname="">
{data.map(el => (
el.tech.map(currtech => (
<span classname="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
{currtech}
</span>
))
))}
</div>
score:0
from your code, you can see that you're just outputting the array at {tech.tech}
:
try this, assuming you already created the component as pill
and data
hold the array of project objects; i am also assuming this is a project component and the pill
component lives in it, then:
<div classname="">
{data.map(project => (
<span classname="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
{project.tech.map(t => <pill tech={t} />)}
</span>
))}
</div>
Source: stackoverflow.com
Related Query
- printing out items from an array within an array of objects
- Create nested JSX list items from multi-level nested array of objects reactjs
- How to correctly add and remove specific items from an array within state?
- Remove Items dynamically from Array of Objects
- For some reason my content within an array is not printing out to the screen
- Return matching item from within nested array of objects
- How can I group specific items within an object in the same array and delete them from the core array?
- Pick values to Component from array within array of objects
- react facing issues to find out specific data from an array of objects
- How to filter out array within array of objects based on date range?
- How to access data within an array of objects sent from client side?
- How can I delete an entire json object from an array of json objects and write it out to file?
- regex - Filter out year from a date string in an array of objects
- How to find if one of the items have completed property with value false from an array of objects using javascript and react?
- Printing Array of Objects from API call in React.js
- How to prevent function from repeating items into an array of objects in ReactJS?
- Rendering React Components from Array of Objects
- React JS: how to properly remove an item from this.state.data where data is an array of objects
- Get first object from array of objects in react
- How to count number of occurrences of distinct values from an array of objects in Javascript?
- How to render random objects from an array in React?
- Checking if items within mapped array share values
- how to remove duplicate objects from an array in reactjs
- Remove items from an array React?
- React native delete multiple items from state array
- Adding key value pair (value from an array) to specific objects in an array
- show dynamic select items mapping over array of objects
- How to loop through properties of objects inside of an array within a React component?
- How to get Current week from given array of objects date in javascript
- How to find length of an array of objects from ReactJS setState?
More Query from same tag
- I am attempting to use setState in React
- Best way to pass an image as props?
- React Typescript - Vertical and horizontal data in table from a single JSON
- React: how to update a deep property?
- React - Uncaught TypeError: Cannot read property "name' of undefined using Airtable
- Can't apply styles to Textfield using className in materi-ui latest version V1.0.0-beta.26
- Express and React, send CSURF token
- React JS - How to update firestore values in real time
- Ant Design: Move Position sub menu to the top of screen
- In React Hook useCallback, How are (a,b) used
- Stop loading a new route/component if current component has changes
- Padding breakpoints in MUI5 sx props
- Passing props from different Parent components
- Component Child is not re-rendered although state updated
- antD model API - Background colour change
- react select not recognizing default value
- webpack does not recognize file-loader
- How to get specific fields from an api fetch using redux saga
- How do I change format vAxis for specific targetAxisIndex series in React Google Chart
- How to functionally load new data for multiple React components
- for-loop in function call with state hooks - React
- How to setState with hooks in EventEmitter's on('change') function?
- Using 'ref' on React Styled Components is not working
- Jest mockImplementation works in one test file, but fails in another
- Testing onClose event from a component to be called using jest
- How to drag a scaled element
- Redux using functional component without React
- How to configure NGINX to reroute a React Router app built on sub domains?
- React - Differential Loading (es5, es6, esnext, etc) based on browser
- React Img Src Path not Working - How to Import Images