How to get parameter when i click on buttonm in React functional component

Question

i have an issue, i need when i click on listItem, console.log it's "category" value but it return "undefined".

function Portfolio() {

    const handleClick  = (e)=>{
        console.log(e.target.category)

    }
    return (
        <Section>
            <Title><TitleSpan>My</TitleSpan> Portfolio</Title>
            <List>
                <ListItem active category={"all"} onClick={handleClick}>All</ListItem>
                <ListItem category={"html" }onClick={handleClick}>HTML</ListItem>
                <ListItem category={"photoshop"} onClick= 
                  {handleClick}>Photoshop</ListItem>
                <ListItem category={"wordpress"} onClick= 
                    {handleClick}>Wordpress</ListItem>
                <ListItem category={"mobile"} onClick={handleClick}>Mobile</ListItem>
            </List>
        </Section>
    )
}

Mohaimin · Accepted Answer · 2021-08-08 15:25:52Z

2

If you don't need the event param, you can just pass the category this way too.

onClick={() => handleClick('mobile')}

const handleClick  = (category)=>{
  console.log(category)
}

answered Aug 8, 2021 at 15:25

Mohaimin

7024 silver badges10 bronze badges

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

Comments

Viet · Accepted Answer · 2021-08-08 15:27:05Z

1

Because we don't have property category. You can use name instead.

const handleClick = (e) =>{
    console.log(e.target.name)
}

<ListItem active name="all" onClick={handleClick}>All</ListItem>

answered Aug 8, 2021 at 15:27

Viet

12.9k2 gold badges18 silver badges23 bronze badges

1 Comment

Mona Omar Over a year ago

i tried to change category to name but still the issue founded

Amruth · Accepted Answer · 2021-08-08 15:25:34Z

0

You can pass 2nd argument.

<ListItem active category={"all"} onClick={(e)=>handleClick(e, 'all')}>All</ListItem>

After than you can collect value like this.

const handleClick  = (e, category)=>{
        console.log(category)

    }

answered Aug 8, 2021 at 15:25

Amruth

5,9122 gold badges30 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to get parameter when i click on buttonm in React functional component

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related