React - Change Class Name

I have a class name “glossary” on my pages. I need to change them to say “somethingelse” as a classname using React when it renders. is this possible?

Can you provide some code here? Not sure what are you trying to achieve. Could you be more specific?

Sure.

The tooltip is being used in this case i need to be able to add the className thats listed in the href tag in the link. I’m not sure if this is possible.

<Tooltip
        className="ds-c-tooltip__trigger-link"
        component="a"
        title="Tooltip trigger uses <a> for the trigger, styled with dotted underline"
      >
        inline trigger
 </Tooltip>

<p><a href="/young-adults/children-under-26/"><img src="/assets/graduating-from-college.jpg" alt=“alt information goes here."></a></p>

<p><a className="ds-c-tooltip__trigger-link" href="/young-adults/children-under-26/"><img src="/assets/graduating-from-college.jpg" alt=“alt information goes here."></a></p>

Here’s the code for the link.

so it would look like this

In this case, you can use “useRef”

import { useRef, useEffect, useState } from "react";
const [className, setClassName] = useState("");
  const inputEl = useRef(null);
  useEffect(() => {
    setClassName(inputEl.current.className);
  }, []);


  return (
    <div className="ds-c-tooltip__trigger-link" ref={inputEl}>
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
      <a href="/young-adults/children-under-26/" alt={className}>
        <img
          src="/assets/graduating-from-college.jpg"
          alt="alt information goes here."
        />
      </a>
    </div>
  );

by creating a reference, you can grab any attributes of the JSX element. If this is not what you need, try to console.log what is in input, and go from there.

See more here: https://reactjs.org/docs/hooks-reference.html#useref

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.