// Start

const languages = ['C', 'Python', 'Javascript', 'Php', 'Typescript', 'Kotlin'];
languages.sort();  // Sorts alphabetically by default
const listItems = languages.map(language => <li>{language}</li>);

// End

  // Start

const frameworks = [
  {id: 0, name: 'React', tech: 'Frontend'},
  {id: 1, name: 'Angular', tech: 'Frontend'},
  {id: 2, name: 'Vue.js', tech: 'Frontend'},
  {id: 3, name: 'NodeJS', tech: 'Backend'},
  {id: 4, name: 'Express.js', tech: 'Backend'}
];

// Sorting by framework name in ascending order
frameworks.sort((a, b) => a.name.localeCompare(b.name));

// Sorting in descending order
frameworks.sort((a, b) => b.name.localeCompare(a.name));

// Mapping sorted objects to list items
const objectItems = frameworks.map(framework => (
  <li key={framework.id}>
    {`${framework.name}: ${framework.tech}`}
  </li>
));

// End

// Start

const frontendFrameworks = frameworks.filter(framework => framework.tech === 'Frontend');

const frontendItems = frontendFrameworks.map(framework => (
  <li key={framework.id}>
    {`${framework.name}: ${framework.tech}`}
  </li>
));

// End

Here, the filter() method filters out frameworks where tech is "Frontend", and the result is used to display only the frontend frameworks.

4. Default Props & PropTypes

React components can be enhanced by specifying default props and PropTypes to ensure type checking and default behavior. Here’s a quick example:

// Start

List.propTypes = {
  category: PropTypes.string,
  items: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
    tech: PropTypes.string
  }))
};

List.defaultProps = {
  category: "category",
  items: []
};
// End

In this snippet, we define PropTypes to validate the type of props passed to the List component. We also set defaultProps to give default values if none are provided.

5. Handling Events in React

React allows us to handle events efficiently, even with parameters or changing the DOM. Let’s look at two different use cases.

Event with Parameter

Here’s a simple example where we track the number of clicks on a button:

let count = 0;
const handleClick = (name) => {
  if(count < 3) {
    count++;
    console.log(`${name}, you clicked me ${count} times`);
  } else {
    console.log(`${name}, stop clicking me`);
  }
};

const Button = () => (
  <button onClick={() => handleClick("momo")}>Click me</button>
);

In this example, the handleClick function takes a name as a parameter. It tracks the number of clicks and logs a different message once the count exceeds 3.

6. Changing Properties on Event Trigger

In this example, we modify the button’s properties based on user interaction, and we toggle the visibility of an HTML element:

let active = false;

const handleClick = (e) => {
  if (!active) {
    e.target.textContent = "I am active";
    e.target.style.backgroundColor = "green";
    e.target.style.color = "white";
    e.target.style.padding = "10px 30px";
    active = true;

    document.getElementById('heading3').style.display = "none";
  } else {
    e.target.textContent = "I am deactivated";
    e.target.style.backgroundColor = "red";
    e.target.style.color = "white";
    e.target.style.padding = "10px 30px";
    active = false;

    document.getElementById('heading3').style.display = "block";
  }
};

Here, we check if a button is active or not. If it’s not active, we update its text and style. We also hide a heading element by changing its display property. When the button is clicked again, the button text and style revert, and the heading is made visible again.

Conclusion

React makes it easy to work with arrays, objects, and events. Sorting, filtering, and mapping arrays, along with managing event-driven updates to the UI, are key skills for any React developer. These snippets provide a solid foundation for handling these tasks in your projects.

The post React Code Snippets: A Guide to Handling Lists, Arrays, and Events appeared first on Code Snippets.