Question 289499 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cant render a react component from onClick

i’m working on a React web app. I would like to render a component from an onClick. So a user looking through profiles should be able to click on a profile and that directs them to the profile/portfolio page. The profiles are mapped through and the onClick is in a map. The code doesn’t work though, the profile prop that’s passed down is undefined. profiles and profile information is pulled from Firestore.

Page With Multiple Profiles

return (
<div>
            {profiles.map((profile) => {
              const portfolioShow = (profile) => {
                console.log("Portfolio Show: ", profile.user);
                navigate(`/portfolio/${profile.user}`);
                return <Portfolio profile={profile} />;
              };

              return (
                <div
                  key={profile.user}
                  onClick={() => portfolioShow(profile)}
                >
                  // Components that show different profiles.
                </div>
)

The Portfolio Show console log works and it prints the profile.user.

The Portfolio page:

export default function Portfolio({ profile }) {
  useEffect(() => {
    console.log("Profile: ", profile);
  }, [publish, profile]);


  return (
          <>
            // portfolio and profile components
          </>
  );
}

The profile prop that’s passed down is undefined.

Any assistance would be appreciated.

Tags:

2

Answers


  1. 0

    I think the navigation logic is the cause of your problem, in order to solve it use React Router to handle navigation to Portfolio while passing the profile data as parameter, here is an example:

     import { Link } from 'react-router-dom';
 
// your code and other logic here ....


// ... Add this

return (
  <div>
    {profiles.map((profile) => (
      <Link key={profile.user} to={`/portfolio/${profile.user}`}>
        {/* Components that show different profiles */}
      </Link>
    ))}
  </div>
);

    And from Portfolio page use the passed profile data as follow:

    import { useParams } from 'react-router-dom';

// ...

export default function Portfolio() {
  const { user } = useParams();

  useEffect(() => {
    // Fetch profile data based on the user parameter
    // Update your state or perform any necessary actions here ...
    console.log("Profile parameter: ", user);
  }, [user]);

  return (
    <>
      {/* Portfolio and profile components */}
    </>
  );
}

    Make sure you have React Router installed using : (npm install react-router-dom) and that your application is set up to use it.

    Good luck.

    Login or Signup to reply.
  2. 0

    At first, you need to define portfolioShow function out of map.

    like this:

    import { useNavigate } from 'react-router-dom';
    
export default function MainComponent({ profiles }){
        function portfolioShow(profile) {
            navigate(`/portfolio/${profile.user}`, { state: profile});
        }
    return (
              <div>
                {profiles.map((profile) => {
            
                  return (
                    <div
                      key={profile.user}
                      onClick={() => portfolioShow(profile)}
                    >
                      // Components that show different profiles.
               </div>
           )
 }

    Then you get profile state in Portfolio Component using useLocaiton() in react-router-dom v 6.

     import { useLocation } from 'react-router-dom';

export default function Portfolio() {
const location = useLocation();
const profile = location.state

  useEffect(() => {
    console.log("Profile: ", profile);
  }, [publish, profile]);


  return (
          <>
            // portfolio and profile components
          </>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search