how can i get the text from within the div?-CodePudding


const questions = (props) => {
  const { question, options, id } = props.quiz;

  const selected = (e) => {
    e.target.children[0].checked = true;
    console.log(e.target);
  };

  return (
    <div className="bg-gray-200 p-6 m-10 rounded-md">
      <div className="font-bold text-xl text-slate-600">{question}</div>
      <div className="grid grid-cols-2 mt-4">
        {options.map((option) => (
          <div className="border-2 border-solid border-gray-400 rounded  text-gray-500 m-1">
            <div className="flex cursor-pointer p-3" id={id} onClick={selected}>
              <input type="radio" className="mr-2" name="name" />
              {option}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default questions;

if console.log(e.target) is done in the selected function return the Div. How can I access the text of the Div within the selected function?

CodePudding user response：

You can access the text of the Div within the selected function by using the .textContent property on the e.target object. This will return the text content of the Div that was clicked.

const selected = (e) => {
    e.target.children[0].checked = true;
    console.log(e.target.textContent);
  };