CODEWITHSUNDEEP
javascriptreactjsreact-hooksdatepicker
Somdotta Sarkar
Somdotta Sarkar

Reputation: 119

How to show date corresponding to the name in React

I have an array consisting of names and dates of birth. I have to display their name by selecting from the list automatically the date of birth will appear corresponding in the other field. I'm unable to do that. Can anyone help me with this? I'm using the Mantine library for styling purposes. The Select and DatePicker is from the Mantine library. enter image description here


const user= [{"name": "Gavin",
              "id":1,    
              "DOB": "2007-01-03",
            },
           { 
            "name": "Harvey", 
             "id":2,   
            "DOB": "1980-11-23",
          }]

const [user, setUser] = useState();
const[birthDate, setBirthDate] = useState();
function HeaderSelect() {
    return (
      <div style={{ marginTop: 70, marginBottom: 70 }}>
        <Grid>
          <Grid.Col span={3}>
            <Select
              label="Name"          
              
              data={user.map((op) => ({
                label: op.name,
                value: op.name,
              }))}
              value={user}
              onChange={(selected) => setUser(selected)}
            />
          </Grid.Col>
          <Grid.Col span={3}>
            <DatePicker
              placeholder={new Date().toLocaleString(undefined, {
                year: "numeric",
                month: "long",
                day: "numeric",
              })}
              label="DOB"
              clearable={false}
              value={birthDate}
              onChange={setBirthDate} 

            />
          </Grid.Col>
          
        </Grid>
      </div>
    );
  }

Upvotes: 0

Views: 83

Answers (2)

YOGENDRA SINGH
YOGENDRA SINGH

Reputation: 118

Just change this in onchange function. I think it will help!

onChange={(selected) => {
              setUser(selected);
               setBirthDate(user.find(u => u.name == selected.value).DOB);
          }}

Upvotes: 1

Oyinkansola Shoroye
Oyinkansola Shoroye

Reputation: 374

try using this

function HeaderSelect() {
    return (
      <div style={{ marginTop: 70, marginBottom: 70 }}>
        <Grid>
          <Grid.Col span={3}>
            <Select
              label="Name"          
              
              data={user.map((op) => ({
                label: op.name,
                value: op.name,
              }))}
              value={user}
              onChange={(selected) => {
                setUser(selected);
                setBirthDate(user.find(u => u.name == selected.value).DOB);
              }}
            />
          </Grid.Col>
          <Grid.Col span={3}>
            <DatePicker
              placeholder={new Date().toLocaleString(undefined, {
                year: "numeric",
                month: "long",
                day: "numeric",
              })}
              label="DOB"
              clearable={false}
              value={birthDate}
              onChange={setBirthDate} 

            />
          </Grid.Col>

Upvotes: 2

Related Questions