filter data as search based on name from maps in react js

Question

i am trying to do a serach using input fild and find the names based on firstname but i dont know howt to do that i have created a codesandbox for my code also that i will give at the end pls help me i am new to react js

{this.state.tablist == "doctor" ? (
                   <div
                     className="chat-avatar gradiantblur"
                     onClick={() => this.livechat(this.state.list.id)}
                   >
                     <div>
                       <img src={img} className="avatar" />
                     </div>
                     <div className="alignstart">
                       {this.state.list.firstname} {this.state.list.lastname}
                       <p className="margin-0">
                         {" "}
                         {this.state.list.speciality}
                       </p>
                       <p className="margin-0">
                         {" "}
                         &#10003; {this.state.list.speciality}
                       </p>
                     </div>
                     <div>152:11</div>
                   </div>
                 ) : this.state.tablist == "consultant" ? (
                   <>
                     <div className="scrollerchatlist">
                       {console.log(this.state.consulatnt)}
                       {this.state.consulatnt.map((data) => (
                         <div
                           className="chat-avatar gradiantblur"
                           onClick={() => this.livechat(data.id)}
                         >
                           <div>
                             <img src={img} className="avatar" />
                           </div>
                           <div className="alignstart">
                             {data.firstname} {data.lastname}
                             <p className="margin-0"> {data.speciality}</p>
                             <p className="margin-0">
                               {" "}
                               &#10003; {data.firstname}
                             </p>
                           </div>
                           <div>152:11</div>
                         </div>
                       ))}
                     </div>
                   </>
                 ) : this.state.tablist == "sales" ? (
                   <>
                     {" "}
                     <div className="scrollerchatlist">
                       {this.state.sales.map((data) => (
                         <div
                           className="chat-avatar gradiantblur"
                           onClick={() => this.livechat(data.id)}
                         >
                           <div>
                             <img src={img} className="avatar" />
                           </div>
                           <div className="alignstart">
                             {data.firstname}
                             {/* <p className="margin-0"> {data.firstname}</p> */}
                             <p className="margin-0">
                               {" "}
                               {/* &#10003; {data.firstname} */}
                             </p>
                           </div>
                           <div>152:11</div>
                         </div>
                       ))}
                     </div>
                   </>
                 ) : null}


                <input
                className="w-100 msserserch gradiantblur"
                  placeholder="seach messages"
                  onChange={(e) =>
                    this.setState({ serchinput: e.target.value })
                  }
              
                  type="Search"
                />

the codesandbox i have created is given below pls refer what i am trying to implement i would be very help full if u can edit my code and give an working aswer in codesandbox itself

https://codesandbox.io/s/intelligent-nova-v7pb1?file=/src/App.js

Rahul · Accepted Answer · 2021-12-24 09:51:16Z

1

I hope this this example help you out. I have applied to Consultant

{this.state.serchinput ? this.state.consulatnt.filter(item => item.firstname === this.state.serchinput).map((data) => (
    <div className="chat-avatar gradiantblur" onClick={() => this.livechat(data.id)}>
     ...
    </div>
)): this.state.consulatnt.map((data) => (
    <div className="chat-avatar gradiantblur" onClick={() => this.livechat(data.id)}>
     ...
    </div>
))}

Here is working demo https://codesandbox.io/s/filter-8i7zf

answered Dec 24, 2021 at 9:51

Rahul

4051 gold badge4 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lpizzinidev · Accepted Answer · 2021-12-24 08:17:44Z

0

You could apply a filter function before displaying the data:

Consultant

{this.state.consulatnt
          .filter((data) =>
            data.firstname
              .toLowerCase()
              .includes(this.state.serchinput.toLowerCase())
          )
          .map((data) => (
            ...
          ))}

Sales

{this.state.sales.filter((data) =>
            data.firstname
              .toLowerCase()
              .includes(this.state.serchinput.toLowerCase())
          ).map((data) => (
          ...
        ))}

Here is a working sandbox with filter working on the consultant and sales lists.

edited Dec 24, 2021 at 8:17

answered Dec 24, 2021 at 7:55

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

1 Comment

vivek kn Over a year ago

@lucca can u pls help me edit the codesandbox

Collectives™ on Stack Overflow

filter data as search based on name from maps in react js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related