import React, { Component } from "react";
import FriendCard from "./components/FriendCard";
import Wrapper from "./components/Wrapper";
import Title from "./components/Title";
import friends from "./friends.json";
import "./App.css";

class App extends Component {
  // Setting this.state.friends to the friends json array
  state = {
    friends
  };

  removeFriend = id => {
    // Filter this.state.friends for friends with an id not equal to the id being removed
    const friends = this.state.friends.filter(friend => friend.id !== id);
    // Set this.state.friends equal to the new friends array
    this.setState({ friends });
  };

  // Map over this.state.friends and render a FriendCard component for each friend object
  render() {
    return (
      <Wrapper>
        <Title>Friends List</Title>
        {this.state.friends.map(friend => (
          <FriendCard
            removeFriend={this.removeFriend}
            id={friend.id}
            key={friend.id}
            name={friend.name}
            image={friend.image}
            occupation={friend.occupation}
            location={friend.location}
          />
        ))}
      </Wrapper>
    );
  }
}

export default App;

El fragmento de código a continuación me permite hacer clic en un card (bootstrap-css) y eliminar el card. ¡Funciona! Pero mi pensamiento lógico o enfoque es on click, delete this card. No veo eso en este código pero funciona. No vengo de un fondo de programación.

Espero que alguien me lo explique y le dé sentido en términos simples si lo cree. Y tal vez me dirija a algunos ejemplos más. Gracias por adelantado.

 removeFriend = id => {

    const friends = this.state.friends.filter(friend => friend.id !== 
id);
     this.setState({ friends });
  };

Y la totalidad a continuación:

Aquí está la componente amiga:

import React from "react";
import "./FriendCard.css";

const FriendCard = props => (
  <div className="card">
    <div className="img-container">
      <img alt={props.name} src={props.image} />
    </div>
    <div className="content">
      <ul>
        <li>
          <strong>Name:</strong> {props.name}
        </li>
        <li>
          <strong>Occupation:</strong> {props.occupation}
        </li>
        <li>
          <strong>Location:</strong> {props.location}
        </li>
      </ul>
    </div>
    <span onClick={() => props.removeFriend(props.id)} className="remove">
      𝘅
    </span>
  </div>
);

export default FriendCard;
2
Gel 2 mar. 2018 a las 21:49

3 respuestas

La mejor respuesta

Entonces, la parte que has publicado aquí

removeFriend = id => {
  const friends = this.state.friends.filter(friend => friend.id !== id);
  this.setState({ friends });
};

Es la última parte de su pensamiento lógico eliminar esta tarjeta

Es la función que se invoca al hacer clic, pero no maneja el clic real. Toma una identificación como entrada y establece el estado de tus amigos como todos los elementos que coinciden con la identificación dada. Esto se hace mediante la función de filtro, sobre la que puede leer más aquí. https://developer.mozilla.org/ es-ES / docs / Web / JavaScript / Reference / Global_Objects / Array / filter

La siguiente parte de su pensamiento lógico al hacer clic se maneja en el componente FriendCard

En su componente de aplicación, esta línea inyecta su función de controlador en el componente FriendsCard como una propiedad

removeFriends={this.removeFriends}

Esto significa que el componente FriendCard llamará a su función removeFriends cada vez que haga clic en ella.

El manejo real de clics se realiza en su componente FriendCard en esta línea

<span onClick={() => props.removeFriend(props.id)} className="remove">
1
the_cheff 2 mar. 2018 a las 19:08

Tu ejemplo es incompleto. Para comprenderlo realmente, debe analizar qué sucede dentro del componente <FriendCard>. Entonces notarás que la lógica probablemente realmente funcione como te imaginas.

Verá que el componente FriendCard se importa en la línea 2. Se hace referencia a él dentro de la función render que comienza en la línea 22.

El componente App tiene un objeto de estado que contiene una propiedad friends. Para cada uno de esos amigos que están dentro del objeto de estado, representamos un componente FriendCard iterando con el método de mapa sobre el estado en la línea 27. Puede leer más sobre el método de mapa aquí.

Pasamos un par de propiedades al componente FriendCard. Una de las propiedades que pasamos al Componente FriendCard es el método removeFriend definido en la línea 14.

Este método removeFriend es realmente responsable de eliminar a un amigo de nuestro objeto state. Como puede ver, recibe un argumento id y filtra el objeto state para todos los amigos que tienen un id diferente al que pasamos (eliminando esencialmente la identificación que estamos pasando al método )

Ese método removeFriend probablemente está vinculado a un controlador click dentro del componente FriendCard y se invoca una vez que hacemos clic en él.

1
Snowball 2 mar. 2018 a las 19:03

Ambas respuestas anteriores son correctas. También agregaría que cuando actualice la propiedad de estado usando esta función .setState, esto activa React para llamar a la función de representación de su componente que volverá a representar la lista de sus amigos en función de su nueva propiedad de estado (es decir, la lista de amigos filtrada).

0
jnicolacopoulos 2 mar. 2018 a las 19:28