How to check whether the email from a input field exists in the below list or not?

If I input email in the text box, a validation message has to appear next to the input field. The email entered in the text box should check with the list of email below, if email exists and error message has to be displayed next to it. Please help me with the client side validation.

<React.Fragment>
      <Form unstackable>
        <Form.Group>
          <Form.Input  placeholder='Add Email'  value={email} onChange={(e,data) => setEmail(data.value)} width={8} />
          <span style= ></span>

          <div style=>{validate()}</div>

          <Form.Select fluid value={role} onChange={(e,data) => setRole(data.value)} options={options} placeholder='Select Role' content="Please Select Role"  width={4}/>
          <span style= ></span>
          <Form.Field  primary onClick={sendUserInvite} style= control={Button}>Invite</Form.Field>
       </Form.Group>
      </Form>
      <div style=>

      <Table  singleLine >
    <Table.Header style=>
      <Table.Row>
        <Table.HeaderCell >  Name  </Table.HeaderCell>
        <Table.HeaderCell >  
          <Dropdown search-type="Invitation" 
          text={filter.Invitation || 'Invitation Status'}  
          onChange={filterTable} 
          options={statusOptions} />
        </Table.HeaderCell>
        <Table.HeaderCell >   
           <Input  search-type="email" 
           onChange={filterTable} icon='search' 
           placeholder='Email'/>  
           </Table.HeaderCell>
        <Table.HeaderCell >    
            <Dropdown search-type="role"  text={getRoleName(filter.role) || 'Role'}  onChange={filterTable} options={options} />
        </Table.HeaderCell>
        <Table.HeaderCell>   Actions  </Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      {filterData.sort(function(a, b) {
              var c = new Date(a.createdAt);
              var d = new Date(b.createdAt);
              return d-c;
          }).map((k,i)=> 
      <Table.Row key={i}>
         <Table.Cell>{<Icon circular disabled={!i.user} name='user' />}
         {(k.firstName || "").length <= 26 ? <span>{k.firstName}</span>
                                                    : <Popup trigger={(<span
                                                         >
                                                        {(k.firstName || "").substring(0, 26)}...
                                                    </span>)}
                                                        content={k.firstName}
                                                        position='bottom right'
                                                        size="tiny"
                                                         />}
          </Table.Cell>
         <Table.Cell>{k.Invitation}</Table.Cell>

        <Table.Cell>{k.email}</Table.Cell>]

from Recent Questions - Stack Overflow https://ift.tt/3CNEIfO
https://ift.tt/3ieOHDc