Retrieve value property of div in the click event

user_5600930 0
Viewed 662

My goal is to get the value and id properties of the div. The id is working but I haven't been able to get the value to work. I've tried event.target.value and it's still returning undefined. Am I suppose to pass the property seperate or is it attached to the event?

// hooks
const {useState} = React;

const OPTIONS =  [
        {id: 0, value: '00:00', display: 'Midnight', period: null},
        {id: 1, value: '00:30', display: '12:30', period: 'AM'},
        {id: 2, value: '01:00', display: '1:00', period: 'AM'},
        {id: 3, value: '01:30', display: '1:30', period: 'AM'},
        {id: 4, value: '02:00', display: '2:00', period: 'AM'},
        {id: 5, value: '02:30', display: '2:30', period: 'AM'},
        {id: 6, value: '03:00', display: '3:00', period: 'AM'},
        {id: 7, value: '03:30', display: '3:30', period: 'AM'},
        {id: 8, value: '04:00', display: '4:00', period: 'AM'},
        {id: 9, value: '04:30', display: '4:30', period: 'AM'},
        {id: 10, value: '05:00', display: '5:00', period: 'AM'},
        {id: 11, value: '05:30', display: '5:30', period: 'AM'},
        {id: 12, value: '06:00', display: '6:30', period: 'AM'},
    ]

function TimeInput(props){
    function handleClick(event, value){
      console.log(event.target.value)
      props.onClick(Number(event.target.id), value);
    };
    const timeMarkup = OPTIONS.map(option => 
      <div 
        className={ props.value === option.id ? 'button selected' : 'button' }
        id={option.id}
        value={option.value}
        onClick={(e, value) => handleClick(e, value)}
      >
          {option.display} {option.period}
      </div>
    );
    return (
        <div className='time-container'>{timeMarkup}</div>
    );
};

function App(){
  const [selectedId, setSelectedId] = useState('');
  const [value, setValue] = useState('');
  function handleClick(id, value){
    setSelectedId(id);
    setValue(value)
  }
  return (
    <div>
      <p>Id: {selectedId} Value: {value}</p>
      <TimeInput value={selectedId} onClick={handleClick}/>
    </div>
  );
};

// Render
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
.time-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 10px 0 10px 0;
}

.button {
  cursor: pointer;
  background-color: #66bb6a;
  border-radius: 25px;
  margin: 0 2px 0 0;
  text-align: center;
  color: white;
  font-weight: 600;
  height: 20px;
  padding: 3px;
  white-space: nowrap;
}

.button:hover {
  background-color: #8ce291;
  color: black;
}

.selected {
  pointer-events: none;
  background-color: #002e03;
}
<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

reactjs html javascript
2 Answers

A div does not have a value property. You could probably retrieve it with getAttribute but there is an easier solution. Change value={option.value} onClick={(e, value) => handleClick(e, value)} to onClick={(e) => handleClick(e, option.value)}

As a side not you should not make clickable divs for accessibility reasons. You should either use styled button or anchor tags. At the very least add the aria attribute role="button" to the div.

user_19674840

change click event to :

onClick={(e, value) => handleClick(e, option.value)}
user_126087140
Related