CODEWITHSUNDEEP
reactjstypescriptmaterial-uireact-hookstsx
lo7
lo7

Reputation: 445

How do I map dates with a specific ID in textfield value?

I have an array with objects called dates, example of one object in the array: {id: 9898, date: 10/06/2020}.

In the array, there will be many objects with same id, I want to map dates with same id in TextField, see code below. How do I achieve that?

import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Box, Button, Tooltip } from '@material-ui/core';

   return(
           <div>
                {dates.map(dateValue => (
                    <div>
                        <TextField label="Date" value={dateValue.date} fullWidth />
                        <Box mt="1.5rem" />
                    </div>
                ))}
                    <div>
                        <TextField
                            name="date"
                            id="date"
                            label="New date"
                            inputRef={register}
                            fullWidth />
                    </div>
                <Box mt="1.5rem" />
            </div>
         );

Upvotes: 0

Views: 223

Answers (1)

keikai
keikai

Reputation: 15146

There is an option to use uuid, like react-uuid

A UUID (Universal Unique Identifier) is a 128-bit number used to uniquely identify some object or entity on the Internet.

import uuid from "react-uuid";

const udates = dates.map(x => ({ ...x, uuid: uuid() }));

<div key={dateValue.uuid} ... />

You can also use uuid

import {v5 as uuid} from "uuid";

They have the typescript support @types/uuid

Upvotes: 1

Related Questions