Reading text in Chip

user_14838495 0
Viewed 796

I have a Material UI chip where I want to read the text within it when I click that chip. My code so far is below:

<Chip
  label={name1}
  color="primary"
  variant="outlined"
  onMouseOver={(event) =>
    board.current.addMarker('e4', {
      class: 'emphasize',
      slice: 'marker3',
    })
  }
  onMouseLeave={(event) => board.current.removeMarkers(undefined, undefined)}
  onClick={(event) => alert(event.target.value)}
/>

My onClick event is not picking up the chips value. Where am I going wrong?

material-ui reactjs
4 Answers

You can simply add name1 to that click event and you will get the value:

<Chip
  label={name1}
  color="primary"
  variant="outlined"
  onMouseOver={(event) =>
    board.current.addMarker('e4', {
      class: 'emphasize',
      slice: 'marker3',
    })
  }
  onMouseLeave={(event) => board.current.removeMarkers(undefined, undefined)}
  onClick={(event) => alert(name1)} // <-------- Add name here
/>

I guess that you are looping through some array and printing out these Chips. So just add that value to alert in that passing or in individual component declaration.

user_39555570

This was the method that worked best for me.

<Chip onClick={getChipLabel} label={'Monday'} variant="outlined"  />
    
const getChipLabel = (e) => {console.log(e.currentTarget.innerText)}

Returns "Monday"

user_62221520

Updated the example from Material-UI docs https://material-ui.com/components/chips/#chip-array

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        flexWrap: 'wrap',
        listStyle: 'none',
        padding: theme.spacing(0.5),
        margin: 0,
    },
    chip: {
        margin: theme.spacing(0.5),
    },
}));

export default function ChipsArray() {
    const classes = useStyles();
    const chipData = [
        {key: 0, label: 'Angular'},
        {key: 1, label: 'jQuery'},
        {key: 2, label: 'Polymer'},
        {key: 3, label: 'React'},
        {key: 4, label: 'Vue.js'},
    ];

    function onChipClick(name) {
        console.log("My name is", name);
    }

    return (
        <Paper component="ul" className={classes.root}>
            {chipData.map((data) => {
                return (
                    <li key={data.key}>
                        <Chip
                            color="primary"
                            variant="outlined"
                            label={data.label}
                            className={classes.chip}
                            onClick={() => onChipClick(data.label)}
                        />
                    </li>
                );
            })}
        </Paper>
    );
}
user_154318990

All the previous answers start from the fact of having access to the original data.

In case you don't have it (like passing an array of chips), just use:

chipObj.props.label
user_2927790
Related