[FIXED] How to fetch unique item from redux with conditional operator?

Issue

I am trying to fetch only unique data from the redux store but got all values from the redux store. I use usePerma hook to check id from URL and id of redux data then apply ternary operator but did not get desired output. See the output image and code and please tell how to get only one value from that.

When URL is 1002 only 1002 is item should show but its also showing 1001 item.

Here is my code:

import React from 'react'
import { NavLink } from 'react-router-dom';
import { useStateValue } from './Stateprovider';
import { useParams } from 'react-router';

const User = () => {
    const [{basket}, dispatch] = useStateValue();

    const {id} = useParams();

    return (
        <>
             {basket.map((item) => (
                <>
                {
                    ({id} === {item.id}) ?   //Error
                    <div key="id" className="card">
                    <img src={item.Image} alt="" />
                    <div className="card-data">
                    <h3><span>User Id: </span>{item.id}</h3>
                    <h2><span>Name: </span>{item.name}</h2>
                    </div>
                     <NavLink className="button" exact to='/home' > User Info </NavLink>
                </div>
                 : null
                }
                </>
             ))}
        </>
    )
}

export default User;

Solution

If I understand your question correctly, you want to map only the items from the basket array that match the id match param. For this you can either use Array.prototype.find to first find the matching item and conditionally render if found, or use Array.prototype.filter and just filter the array inline.

Filtering the array inline:

const User = () => {
  const [{basket}, dispatch] = useStateValue();

  const { id } = useParams();

  return (
    <>
      {basket
        .filter(item => item.id === id)
        .map((item) => (
          <div key={item.id} className="card">
            <img src={item.Image} alt="" />
            <div className="card-data">
              <h3><span>User Id: </span>{item.id}</h3>
              <h2><span>Name: </span>{item.name}</h2>
            </div>
            <NavLink className="button" exact to='/home'>
              User Info
            </NavLink>
          </div>
        ))
      }
    </>
  )
}

Finding first, then rendering: remember that .find returns undefined if no match is found

const User = () => {
  const [{basket}, dispatch] = useStateValue();

  const { id } = useParams();

  const item = basket.find(item => item.id === id);

  return item ? (
    <div className="card">
      <img src={item.Image} alt="" />
      <div className="card-data">
        <h3><span>User Id: </span>{item.id}</h3>
        <h2><span>Name: </span>{item.name}</h2>
      </div>
      <NavLink className="button" exact to='/home'>
        User Info
      </NavLink>
    </div>
  ) : null;
}

Answered By - Drew Reese

Answer Checked By - Gilberto Lyons (PHPFixing Admin)