How do I sort an array of objects in react and render them?

Question

I have an array of objects containing user information for a phone book (name, lname, phone). I am not able to render them in the order I want and want to be able to render them sorted by last name. How can I do this?

I render them in a table like this:

{persons.map((element, i) => (
   <tr key={i}>
      <td style={style.tableCell}>{ element.userFirstname }</td>
      <td style={style.tableCell}>{ element.userLastname }</td>
      <td style={style.tableCell}>{ element.userPhone }</td>
   </tr>
))}

To add data to the array, I have a form that appends the data to the array whenever the submit button is pressed. This is how I append the data:

const [persons, setPersons] = useState([
    { 
      userFirstname: "Coder", 
      userLastname: "Byte", 
      userPhone: "8885559999"
    }
  ])

  const [formData, setFormData] = useState({
    userFirstname: "",
    userLastname: "",
    userPhone: ""
  });

  const { userFirstname, userLastname, userPhone } = formData;

  const onChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

  const onSubmit = (e) => {
    e.preventDefault();
    setPersons(persons.concat({ userFirstname: userFirstname, userLastname: userLastname, userPhone: userPhone }));
  }

Do I need to sort the array before the map function or can I do it during the map function?

Badal Saibo · Accepted Answer · 2021-07-16 15:45:59Z

4

You can do wherever you want, during the setting of state or during rendering.

I'd go with doing it in map i.e rendering as an array, as its just shuffling of data. This way my original state list is ordered by 'last modified', which might come handy later.

So to sort them alphabetically via last name, you can use the sort method.

{persons.sort((a,b) => a.userLastname.localeCompare(b.userLastname))).map((element, i) => (
 <tr key={i}>
    <td style={style.tableCell}>{ element.userFirstname }</td>
    <td style={style.tableCell}>{ element.userLastname }</td>
    <td style={style.tableCell}>{ element.userPhone }</td>
 </tr>
))}

edited Jul 16, 2021 at 15:45

answered Jul 12, 2021 at 15:16

Badal Saibo

3,9031 gold badge18 silver badges30 bronze badges

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

Comments

Sanket Shah · Accepted Answer · 2021-07-12 15:15:09Z

1

You can do this:

You have to install lodash library: npm i --save lodash

import {sortBy} from 'lodash';


{sortBy(persons, ['userLastname']).map((element, i) => (
   <tr key={i}>
      <td style={style.tableCell}>{ element.userFirstname }</td>
      <td style={style.tableCell}>{ element.userLastname }</td>
      <td style={style.tableCell}>{ element.userPhone }</td>
   </tr>
))}

answered Jul 12, 2021 at 15:15

Sanket Shah

3,1091 gold badge13 silver badges24 bronze badges

Comments

Tolga Berk Ordanuç · Accepted Answer · 2021-07-12 15:36:29Z

0

i suggest you to sort the array before setting the state because otherwise in every render it will try to sort it before showing it.

answered Jul 12, 2021 at 15:36

Tolga Berk Ordanuç

666 bronze badges

Collectives™ on Stack Overflow

How do I sort an array of objects in react and render them?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related