1

I am trying to pass the data from my card Component to User Component on a button click. Both are independent components. In card component I and fetching data from an API. Now when I click on any User Info Button I want to go on the User Page and want to display its data. I did try it using react-redux. But I got all elements on the user page. I need only one user on which profile I clicked. Is there any way to solve this issue with or without redux?

Card.js

import React, { useEffect,useState } from 'react'
import axios from 'axios'
import { NavLink } from 'react-router-dom'
import User from './User'
import { useStateValue } from './Stateprovider'

const Card = ({id,name,Image},props) => {
    const [posts, setposts] = useState([]) 
    
    useEffect(() => {
        axios.get('https://s3-ap-southeast-1.amazonaws.com/he-public-data/users49b8675.json')
        .then(res =>{
            console.log(res);
            setposts(res.data)
        })
        .catch(err =>{
            console.log(err);
        })
      },[])


      const [filter,setfilter] = useState('');
      const searchText = (event) =>{
          setfilter(event.target.value);
      }
      let dataSearch = posts.filter(item =>{
          return Object.keys(item).some(key =>
            item[key].toString().toLowerCase().includes(filter.toString().toLowerCase()))
      })

      
    function sendData(){
        <User id={id} name={name} />
    }

    return (
        <>
            <div className="card-area">
            {
                dataSearch.map((item) => {
                    let {id,name,Image}=item
                    return (
                        <>
                    <div key="id" className="card">
                    <img src={Image} alt="" />
                    <div className="card-data">
                    <h3><span>User Id: </span>{id}</h3>
                    <h2><span>Name: </span>{name}</h2>
                    </div>
                     <NavLink className="button" exact to={`/${item.id}`} onClick={()=>sendData()}> User Info </NavLink>
                    </div>
                    </>
                )} )
            }
            </div>
        </>
    )
}

export default Card;

User.js

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom';
import { useEffect } from 'react/cjs/react.development';
import Card from './Card';
import { useStateValue } from './Stateprovider';

const User = (props) => {        

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

export default User;
Ankit Kumar
  • 218
  • 2
  • 13

2 Answers2

1

I am assuming you have a route for displaying the user info, in that case you can use Link component from react-router to redirect the user to a new page with a predefined state

<Link
  to={{
    pathname: "/userinfo",
    state: { userinfo: {
         id: "some id",
         name: "some name"
    }}
  }}
/>

and you can access the state in the userinfo component using props.location.state.userinfo. also take a look at this thread How do I pass state through React_router? and https://v5.reactrouter.com/web/api/Link

Sai Krishna
  • 71
  • 2
0

You need to pass props to the component to have access to it

React component and props

AnthoVdo
  • 102
  • 6