Приложение React Contact Manager, часть 2

Во второй части мы продолжим с того места, где остановились, где создали необходимые нам компоненты, и теперь мы начнем с рендеринга списка.

Поскольку большая часть базовой настройки файлов и компонентов готова к работе, пришло время заняться некоторыми более интересными вещами React с передачей реквизитов, обработкой состояния и множеством JSX!

Создание массива с вложенным хешем с некоторыми жестко закодированными данными, установленными в константу контактов в App.js:

const contacts = [
  {
    id: "1",
    name: "Shane",
    email: "[email protected]",
  },
  {
    id: "2",
    name: "Tanner",
    email: "[email protected]",
  },
];

Теперь передаем массив контактов в качестве реквизита компоненту ContactList:

return (
  <div>
    <Header />
    <AddContact />
    <ContactList contacts={contacts} />
  </div>
);

В компоненте ContactList, если мы передадим props в качестве аргумента и зарегистрируем его в консоли, вы сможете увидеть данные массива контактов в консоли:

const ContactList = (props) => {
  console.log(props);
  return <div>Contact List</div>;
};
export default ContactList;

Создание еще одной постоянной переменной, в которой мы будем отображать массив контактов, чтобы структурировать, как будут отображаться данные каждого отдельного контакта:

const renderContactList = props.contacts.map((contact => {
  return (
    <div>
      <div>
        <div>{contact.name)</div>
        <div>{contact.email}</div>
      </div>
    </div>
  );
})

• Вложенные элементы div для последующей стилизации CSS.

Ссылка на новую константу в JSX в возврате ContactList:

return <div>
  {renderContactList}
</div>

На этом этапе вы должны увидеть отрендеренный список.

Создание компонента ContactCard, куда мы переместим в него код, который обрабатывает то, как будут отображаться контактные данные из ContactList:

import React from 'react';
const ContactCard = () => {
  return (
    <div>
      <div>
        <div>{contact.name}</div>
        <div>{contact.email}</div>
      </div>
    </div>
  );
};
export default ContactCard;

Передача реквизита из ContactList в ContactCard путем импорта ContactCard в ContactList:

import React from 'react';
import ContactCard from './ContactCard.js';
const ContactList = (props) => {
  console.log(props);
const renderContactList = props.contacts.map((contact => {
  return <ContactCard contact={contact} />;
});

И передача реквизита в ContactCard:

const ContactCard = (props) => {
  return (
    <div>
      <div>
        <div>{contact.name}</div>
        <div>{contact.email}</div>
      </div>
    </div>
  );
};

Настройте еще одну постоянную переменную в ContactCard, чтобы упростить вызов атрибутов контакта, после чего вы можете изменить вызовы «contact.name» и «contact.email» на просто имя и адрес электронной почты:

const { id, name, email } = props.contact;

В App.js удаление жестко запрограммированных контактных данных и реализация метода useState React:

import React, { useState } from 'react';
...
function App() {
  const [contacts, setContacts]= useState([]);
...

Мы хотим иметь возможность добавлять новый контакт в список, когда мы нажимаем «Добавить» после заполнения формы, поэтому давайте добавим состояние в компонент класса:

class AddContact extends React.component {
  state = {
    name: "",
    email: "",
  };
...
<input 
  type="text" 
  name="name" 
  placeholder="Name"
  value={this.state.name} 
  onChange={(e) => this.setState({name: e.target.value})
/>
...
<input 
  type="text" 
  name="email" 
  placeholder="Email"
  value={this.state.email} 
  onChange={(e) => this.setState({email: e.target.value})
/>

Создание функции стрелки «добавить» для обработки логики добавления нового контакта в том же компоненте:

...
add = (e) => {
  e.preventDefault();
  if(this.state.name === "" || this.state.email === "") {
    alert("Make sure to fill in all fields!")
    return;
  }
  console.log(this.state);
};
render() {
...
  <form onSubmit={this.add}>
...

Передача реквизита от ребенка к родителю:

function App() {
...
<AddContact addContactHandler={addContactHandler} />

Определяем addContactHandler в App.js и пока просто регистрируем контакт в консоли:

const addContactHandler = (contact) => {
  console.log(contact);
};

Используя обработчик, который мы передали из компонента App в функцию добавления в компоненте AddContact, а также установив состояние, чтобы поля очищались при добавлении нового контакта:

add = (e) => {
  e.preventDefault();
  if(this.state.name === "" || this.state.email === "") {
    alert("Make sure to fill in all fields!")
    return;
  }
  this.props.addContactHandler(this.state);
  this.setState({ name: "", email: "" });
};

Использование setContact для обновления состояния в компоненте приложения:

const addContactHandler = (contact) => {
  console.log(contact);
  setContacts([...contacts, contact]);
};

Когда мы заполняем форму и нажимаем «Добавить», новый контакт создается и отображается! Но когда страница обновится, новый контакт исчезнет, ​​так как нам все еще нужно сохранить его, когда он будет создан, в чем-то вроде localStorage. Именно с этого мы и начнем следующую часть этой серии. Спасибо за чтение, и я надеюсь, что они помогут вам в вашей практике кодирования React! Удачного кодирования!

Гитхаб: