将代码拆分成组件应用过滤器，进行排序，添加，编辑，删除数据

Question

I am new to react. I started creating a phonebook app which fetches a json file, loads it to the screen. You can sort, filter, add, delete, edit data. My problem is that I cannot make my code cleaner and it looks really bad, because I am even repeating code blocks.

import React from 'react';

const filteredAndSorted = ({contacts, search, sortIt, sortBy, direction, deleteContact}) => {
    if (direction === 'notsorted') {
    const filteredData = contacts.filter(
    contacts => {
    return contacts.name.toLowerCase().includes(search.toLowerCase()) ||
    contacts.address.toLowerCase().includes(search.toLowerCase()) ||
    contacts.phone_number.includes(search);
    })
        return (
    <div>
    {filteredData.map((contacts) => 
        <ul className="gradient_text" key={contacts.name}>
        <li>Name: {contacts.name}</li>
        <li>Phone: {contacts.phone_number}</li>
        <li>Address: {contacts.address}</li>
        <li>Id: {contacts.name}</li>
        <button onClick={() => deleteContact(contacts.name)}>delete</button>
        <hr />
        </ul>
        )}    

       </div>

        );
    }
    else if(direction === 'Ascending') {
        let filteredAndSortedData = 
    contacts
    .sort((a, b) => { if(a.name < b.name) { return -1; } if(a.name > b.name) { return 1; } return 0; })
    .filter(
    contacts => {
    return contacts.name.toLowerCase().includes(search.toLowerCase()) ||
    contacts.address.toLowerCase().includes(search.toLowerCase()) ||
    contacts.phone_number.includes(search);
    })
        return (
    <div>
    {filteredAndSortedData.map((contacts) => 
        <ul className="gradient_text" key={contacts.name}>
        <li>Name: {contacts.name}</li>
        <li>Phone: {contacts.phone_number}</li>
        <li>Address: {contacts.address}</li>
        <li>Id: {contacts.name}</li>
        <button onClick={() => deleteContact(contacts.name)}>delete</button>
        <hr />
        </ul>
        )}    

       </div>

        );
    }
    else if(direction === 'Descending') {
        let filteredAndSortedData = 
    contacts
    .sort((a, b) => { if(a.name > b.name) { return -1; } if(a.name < b.name) { return 1; } return 0; })
    .filter(
    contacts => {
    return contacts.name.toLowerCase().includes(search.toLowerCase()) ||
    contacts.address.toLowerCase().includes(search.toLowerCase()) ||
    contacts.phone_number.includes(search);
    })
        return (
    <div>
    {filteredAndSortedData.map((contacts) => 
        <ul className="gradient_text" key={contacts.name}>
        <li>Name: {contacts.name}</li>
        <li>Phone: {contacts.phone_number}</li>
        <li>Address: {contacts.address}</li>
        <li>Id: {contacts.name}</li>
        <button onClick={() => deleteContact(contacts.name)}>delete</button>
        <hr />
        </ul>
        )}    

       </div>

        );
    }

}

export default filteredAndSorted;

I would like to split this file into smaller components, but I am getting confused with accessing filteredAndSorted and mapping through it. Any advice is really appreciated.

Answer 1

Quicker suggestion: define a simple function on the top, something like this:

const contactDetail = (contacts) => 
    <ul className="gradient_text" key={contacts.name}>
    <li>Name: {contacts.name}</li>
    <li>Phone: {contacts.phone_number}</li>
    <li>Address: {contacts.address}</li>
    <li>Id: {contacts.name}</li>
    <button onClick={() => deleteContact(contacts.name)}>delete</button>
    <hr />
    </ul>
    )

From here you can replace .map calls with simpler forms:

filteredAndSortedData.map(contactDetail)