React event.target.value returns undefined

Question

So I was wondering if I could add a method in my component so I could click the h1 element to redirect to the respective target.value page by inserting an onClick event like the code below:

import React from 'react'
import CollectionItem from '../collection-item/collection-item.component'
import './collection-preview.styles.scss'
import { withRouter } from 'react-router-dom'


const CollectionPreview = ({ title, items, history }) => (
    <div className='collection-preview'>
        <h1 className='title' onClick={(event) => history.push(`/shop/${event.target.value}`)}>
            {title.toUpperCase()}
        </h1>
        <div className='preview'>
            {
                items
                    .filter((item, index) => index < 4)
                    .map((item) => (
                        <CollectionItem key={item.id} item={item} />))
            }
        </div>
    </div>
)

export default withRouter(CollectionPreview)

But it didnt work. The event.target.value always return undefined, even though when i tried to console log only the event.target , it normally return the h1 element I was clicking. How could I fix this?

Only form control elements have a value property. Regular DOM elements do not. — Felix Kling
– Felix Kling, Commented Dec 14, 2019 at 7:05

jbergeron · Accepted Answer · 2019-12-14 06:39:32Z

2

I am not sure to understand why you use a onClick event on a H1. I think you use a Link instead inside your H1 tag.

import React from "react";
import CollectionItem from "../collection-item/collection-item.component";
import "./collection-preview.styles.scss";
import { withRouter, Link } from "react-router-dom";

const CollectionPreview = ({ title, items, history }) => (
  <div className="collection-preview">
  
    <h1 className="title">
      // You should use a Link component instead on the onClick props
      <Link to={`/shop/${title.toUpperCase()}`}>{title.toUpperCase()}</Link>
    </h1>
    
    <div className="preview">
      {items
        .filter((item, index) => index < 4)
        .map(item => (
          <CollectionItem key={item.id} item={item} />
        ))}
    </div>
  </div>
);

export default withRouter(CollectionPreview);

Hope it helps. Happy coding

answered Dec 14, 2019 at 6:39

jbergeron

5553 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhamad Hafiz Over a year ago

Ok actually, I'm kinda felt ashamed for not thinking about Link. Thank you so much for the solution @jbergeron :)

jbergeron Over a year ago

No worry @MuhamadHafiz, we all do this little mistakes :) Keep coding

akhtarvahid · Accepted Answer · 2019-12-14 06:34:54Z

0

If it's listing page and wanna navigate to particular page of listing.

<h1 className='title' onClick={() => history.push(`/shop/${title}`)}>
    {title.toUpperCase()}
</h1>

instead of

<h1 className='title' onClick={(event) => history.push(`/shop/${event.target.value}`)}>
    {title.toUpperCase()}
</h1>

answered Dec 14, 2019 at 6:34

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

React event.target.value returns undefined

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related