How to properly set "key" in React components?-CodePudding

Here are the three React components:

Product.jsx

import statusMap from "../statusMap";

function Product(props) {
  const {
    prod_id: id,
    prod_name: title,
    prod_status: status,
    prod_price: price,
    prod_oldprice: oldPrice,
  } = props;

  let oldPriceChecker = (oldPriceValue) => {
    if (oldPriceValue) {
      let oldPriceStr = oldPriceValue   " zł";
      return oldPriceStr;
    } else {
      return "";
    }
  };

  let statusChecker = (value) => {
    if (value != undefined && value != "") {
      let string = value;
      let array = string.split(",");
      for (let i = 0; i < array.length; i  ) {
        array[i] = statusMap.get(array[i]);
      }

      return array.map((n) => <div className="status">{n}</div>);
    }
  };

  return (
    <div className="row">
      <div className="card">
        <div className="card-image">
          <img src="https://via.placeholder.com/150" key={id} />
          <div className="status_container">{statusChecker(status)}</div>
        </div>
        <div className="card-content">
          <span className="card-title">{title}</span>
          <hr className="card_hr" />
          <p className="card_price">{price} zł</p>
          <div className="card_price old_price">
            {oldPriceChecker(oldPrice)}
          </div>
          <div></div>
        </div>
      </div>
    </div>
  );
}

export { Product };

Products.jsx

import { Product } from "./Product";

function Products(props) {
  const { products = [] } = props;

  return (
    <div className="products">
      {products.length ? (
        products.map((product) => (
          <Product key={product.prod_id} {...product} />
        ))
      ) : (
        <h4 className="products_error">Nothing found</h4>
      )}
    </div>
  );
}

export { Products };

Filter.jsx

import statusMap from "../statusMap";

const Filter = ({ values, value, onChange }) => (
  <div className="row filter_container">
    <h3 className="filter_title">Sortować według</h3>
    <div className="filter_wrapper">
      {values.map((n) => (
        <label>
          <input
            className="with-gap"
            type="radio"
            onChange={() => onChange(n)}
            checked={value === n}
          />
          <span>{statusMap.get(n)}</span>
        </label>
      ))}
    </div>
  </div>
);

export { Filter };

I finished the project, but the following errors continue to hang in the console:

Error1.png

Error2.png

Error3.png

Please tell me how to remove them

I have read the documentation on the key parameter in detail. You may notice that I have tried to set the key values, however this does not clear up the errors in the console.

CodePudding user response：

We need to set a unique key to each element while we return from map function of array. So you can try this one;

  let statusChecker = (value) => {
    if (value != undefined && value != "") {
      let string = value;
      let array = string.split(",");
      for (let i = 0; i < array.length; i  ) {
        array[i] = statusMap.get(array[i]);
      }

      return array.map((n) => <div key={n} className="status">{n}</div>);
    }
  };

I assume your status item is unique in the array you defined. Care the key={n} in following;

return array.map((n) => <div key={n} className="status">{n}</div>);

CodePudding user response：

You need to provide a unique key to each returned element from Array.map function.

the Array.map function have three parameters :

Array.map((element,index,array)=>{return ...}