Useref、usestate、useEffect 问题

Question

I'm trying to create a function that selects an HTML element and changes the value in it to the value in another element using the ref, state, and effect hooks but I can't get the right effect I want

const Service = () => {
const [selected, setSelected] = 
 useState(false);
let change = useRef(null);
const[title, setTitle] = useState("");
useEffect(() => {
setTitle(change.current.children(0))
})
const Changer = (e)=>{
e.preventDefault()
const style = e.target;
if(selected === false){
  
  console.log(`you clicked ${style}`);
}
setSelected( current => !current);
// let style={background: selected ? 
'#6EEFB1' : ''};
// if (selected === true){
//   setSelected(false)
//   // let style= {styleObject.li}
  
// }else{
//   setSelected(true)
// }
}
return(
 <section className={selected ? 
 "serviceClicked" : "services"}>
  <h1>Our Services</h1>
  <div className='service-content'>
    <div className='service-text' ref=. 
    {change}>
    <h2></h2>
    <p>
      Syse infrans att dedade. Redar 
      fäsat. Älogi hypol. Antere 
       nydavarat och hemil. 
      Dist kyning. Kroska 
      bröllopskoordinator. Teletotal. 
      Mor tin. 
    </p>
    <p>
      Spejörar befaladat. Lavis 
      kvasideledes. 
      Dande dak. Anteck ur dick. 
      Skurkstat larad henifiera. Belogi 
      koliga selig. 
    </p>
    </div>
    <div className='service-list'>
      <ul id='top-list'>
        <li onClick={Changer}>
          <img src={oby} />
          {/* <div></div> */}
          <p>ob/gyn</p>
        </li>
        <li  onClick={Changer}>
          <img src={neuro} />
          {/* <div></div> */}
          <p>neurology</p>
        </li>
        <li  onClick={Changer}>
          <img src={peds}  />
          {/* <div></div> */}
          <p>pediatrics</p>
        </li>
      </ul>
      <ul id='bottom-list'>
        <li  onClick={Changer}>
          <img src={dental}/>
          {/* <div></div> */}
          <p>dental care</p>
        </li>
        <li  onClick={Changer}>
          <img src={cardio} />
          {/* <div></div> */}
          <p>cardiology</p>
        </li>
        <li  onClick={Changer}>
          <img src={ent} alt='E.N.T' />
          {/* <div></div> */}
          <p>ent</p>
        </li>
      </ul>
    </div>
  </div>
</section>

) };

The h2 tag is meant to take on the value of the p tags under the li element when clicked, I've figured out how to make the content in the service text shown when the li element is clicked.

what's troubling is how to change the value of the h2 tag to whatever value the p tag of which li element is clicked.

Answer 1

CodeSandBox Example

Instead of using useEffect , useRef , you could simply use your useState to do all that.

I created a constant to make my/your life easier and just map though the elements (you don't need this, but I would recommend it)

const IMAGES = [
  { src: "oby", name: "ob/gyn" },
  { src: "neuro", name: "neurology" },
  { src: "peds", name: "pediatrics" },
  { src: "dental", name: "dental care" },
  { src: "cardio", name: "cardiology" },
  { src: "ent", name: "ent" }
];

<section className={title ? "serviceClicked" : "services"}>
      <h2>{title}</h2>
      ...
      <ul id="top-list">
            {IMAGES.map(({ src, name }) => {
              return (
                <li
                  key={name}
                  onClick={() => {
                    setTitle(name);
                  }}
                >
                  <img src={src} />
                  <h3>{name}</h3>
                </li>
              );
            })}
       </ul>
       ...
</section>

You would really want to use useRef if there's need to interact directly with the element, otherwise when dealing with only data useState/useEffect is more than enough.