using Array map method in TypeScript

Question

How do I render a JSON data dynamically into a component using something like an array.map method with Typescript. for example. I get an error from the code below.

const PricingSection: FC<IProps> = ({ icon, title, price, user, observations,
projects, interviews, buttonType }) => 

const mapped = map(datas => (

        <ul style={{ display: 'flex' }}>
            {datas.icon}
        </ul>
    )

What have you tried, and what exactly is the problem with it? — jonrsharpe, Jun 15 '20 at 13:15
I've tried using something like this: import data from './data.json' const mapped = data.map(datas => {

it's not working — Kenny, Jun 15 '20 at 13:22
(parameter) datas: any Parameter 'datas' implicitly has an 'any' type.ts(7006) — Kenny, Jun 15 '20 at 13:37
Again, **put the info in the question**. So did you research that error message? What *is* `map`, does it take any generic types etc.? Or have you tried adding an explicit type to the arrow function's parameter list? — jonrsharpe, Jun 15 '20 at 13:38

score 0 · Answer 1 · answered Jun 18 '20 at 17:52

You're seemingly not far off... Assuming it's the 'observations' prop that is the array you're wanting to traverse:

const mapped = observations.map(datas => (

        <ul style={{ display: 'flex' }}>
            {datas.icon}
        </ul>
    )

In response to the comment chain where you call out (parameter) datas: any Parameter 'datas' implicitly has an 'any' type.ts(7006) , that is more of a linter typing callout than an error... It is saying that you are implicitly having the type

(datas: any =>

You can resolve it by explicitly putting a type on the datas object like this:

(datas: DataObject =>

using Array map method in TypeScript

1 Answers1