Manipulations with state and some questions about rendering and architecture in React?

Question

JavaScript

Hello! I didn’t want to ask for help for a long time, I was looking for it myself, but due to the lack of the necessary knowledge I had to give up
and
write
here loading data from the API, we load this data into state = { result: [] }, then we render this data by pulling data from state and passing it through the component (which styles the data). As a result, we have 25 styled components with data on the page, and I want that when the button on this component is clicked, it will be added to the basket state = { basket: [] } .
This is how it looks

spoiler

Now to the code (which I will simplify a little, leaving the basic functionality) and then to the problems and questions that have arisen
Styling component (might be painful to the eyes, sorry)

spoiler

const NewsItem = ({ styles, id, name, tagline, abv, image, clickFilter } ) => (
  <div>
     <ul className={styles}>
       <li> <img src={image} alt="empty"
       height='150'></img> </li>
       <li> {`ID - ${id}`} </li>
       <li> {`Название - ${name}`} </li>
       <li> {`Тэг - ${tagline}`} </li>
       <li> {`Крепость - ${abv}`} </li>
        <li>
        <button onClick={clickFilter}>Добавить в корзину</button> //при нажатии этой кнопки добавление в корзину
        </li>       
      </ul>
  </div>
);

main file

spoiler

const BASE_PATH = 'https://api.punkapi.com/v2/beers';

class Store extends Component {
  state = {
    result: [],
    buy:[],
   }

componentDidMount() { 
  fetch(`${BASE_PATH}`) 
    .then(res => res.json())                   //это работает
    .then(result => this.setItem(result))
    .catch(error => error);     
}

setItem = result => {         
  this.setState(  {result}  ); 
}

render() {

  const { result } = this.state;

  return (
    <div>         
       <ul >
        {result.map(({ id, name, tagline, abv, description, image_url}) =>   // вытягивание полученных с 
            <NewsItem key={id}                                              // АПИ данных  и их стилизация
              styles={'item'}             
              image={image_url}    // NewsItem - компонент для стилизации
              id={id}
              name={name}
              tagline={tagline}
              abv = {abv}
              // clickFilter = {здесь нужна реализация метода для добавления в корзину}             
              />
          )}
       </ul>       
      </div>
  )
}

And now the questions:
1. How to add the received "goods" to the basket? I was not able to use the values ​​from state.result to add them to state.basket later.
result is just an array of objects. You can access any product using this.state.result[object_index], but I can’t do anything with this data directly, just like using setState
2. The question follows from the 1st, but is it normal practice to add data to state obtained from the API? If not, then where can they be stored?
3. I wanted to create a button for each "product" that will change the style of this SPECIFIC product (this does not carry any semantic load, but I wanted to implement it in order to understand some things).
My NewsItem component has a styles prop that sets a style to the component.

const NewsItem = ({ styles, ...остальные пропсы}) => (
  <div >
     <ul className={styles}>
...код дальше
 </div>

Tried to change className={ something === true ? 'class1' : 'class2' }
Created a button with onClick = { something === false } handler. This is pseudocode, but the meaning is clear
. As a result, the maximum that I got was to change the style of ALL products when you click on the button in any product. (this was done using true / false in state and a handler that changed the value in state, and with it the style of all components changed).
I roughly understand that these issues can be solved with the help of props or changing the architecture, but I decided not to spend another couple of days looking for answers, but to ask for help.
Thank you very much for listening to me, I hope for help :)

Answer 1

1. What's with the names? NewsItem, setItem, result, clickFilter, styles, buy - never write something like this even as a joke. Replace: NewsItem with Product(or ShopItem), setItem - delete altogether, result with products, clickFilter with handleAddToCartClick, styles with className, buy with cart.
2. There is no point in passing each product property to ShopItem separately. You only make it harder to analyze your code. It is better:

{products.map(product => (
  <ShopItem
    key={product.id}
    className={'item'}
    item={product}
    onAddToCartClick={this.handleAddToCartClick}
  />
)}

3. Base path for that and base path, which should not contain a specific endpoint. Correctly:

const BASE_PATH = 'https://api.punkapi.com/v2';

/* ... */

fetch(`${BASE_PATH}/beers`)

How to add the received "goods" to the cart? I was not able to use the values ​​from state.result to add them to state.basket later.
result is just an array of objects. You can access any product using this.state.result[object_index], but I can’t do anything with this data directly, just like using setState

If you do not understand how to work with data (arrays, objects), then you should now focus on studying this issue:
JavaScript: Data Structures
It makes no sense for you to copy the product to the cart array, you can only add the product id and quantity there:

class Store extends Component {
  state = {
    products: [],
    cart:[],
  };

  handleAddToCartClick = (id, quantity) => {
    const { cart } = this.state;
    const itemIndex = cart.findIndex(item => item.id === id);

    if (itemIndex !== -1) {
      const newCart = [...cart];
      newCart[itemIndex] = { id, quantity: cart[itemIndex].quantity + quantity };
      this.setState({ cart: newCart });
    } else {
      this.setState(prevState => ({
        cart: [
          ...prevState.cart,
          { id, quantity },
        ],
      }));
    }
  };

const ShopItem = ({ className, item, onAddToCartClick }) => (
  <div>
    {/* ... */}
    <button onClick={() => onAddToCartClick(item.id, 1)}>Добавить в корзину</button>
  <div/>
);

In a good way, in the redux store. redux is worth using here, if only because the same product data will be needed both in the cart and on the checkout page.

I wanted to create a button for each "product" that will change the style of this SPECIFIC product (this does not carry any semantic load, but I wanted to implement it in order to understand some things).
My NewsItem component has a styles prop that sets the style to the component.

The easiest option is to use the useState hook:

import React, { useState } from 'react';

const ShopItem = ({ className, item, onAddToCartClick } ) => {
  const [isActive, setIsActive] = useState(false);
  
  handleToggleActiveClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <ul className={`${className}${isActive ? ' active' : ''}`}>
        {/* ... */} 
        <button onClick={handleToggleActiveClick}>Toggle active</button>
      </ul>
    <div/>
  );
}