CODEWITHSUNDEEP
reactjsmaterial-ui
Gotey
Gotey

Reputation: 639

Accessing value through material ui ListItemText component

I have material ui components like:

                  <ListItemText onClick={(ev) => onAreaSelect(ev)} primary={area} />
                </ListItem>

And then:

  const onAreaSelect = (event) => {
      console.log("area seledcted??", event.target, event.target.value)
  }

event.target returns:

<span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"> Area </span>

but event.target.value returns:

undefined

how can I access the value?

Upvotes: 0

Views: 552

Answers (2)

Yashwini Thakur
Yashwini Thakur

Reputation: 46

I faced a similar problem and came up with a work through around this.. you can pass the "area" with event in your function onAreaSelect

For example like this:

<ListItemText onClick={(ev) => onAreaSelect(ev,{area})} primary={area} />
        </ListItem> 

const onAreaSelect = (event, area) => {
console.log("area selected??", event.target, area)
}

Upvotes: 1

Daniel Bellmas
Daniel Bellmas

Reputation: 657

  1. useRef()which will hold the value of the element you put ref field in like so:

        const areaRef = useREf(null)
    .
    .
    <ListItemText ref = {areaRef} onClick={(ev) => onAreaSelect(ev)} 
   primary={area} />

  2. onChange() has two params : event and value so you can do something like this :

      onChange((event,value)=>onAreaSelect(event,value))

Upvotes: 1

Related Questions