CODEWITHSUNDEEP
javascriptreactjs
DesignAaron
DesignAaron

Reputation: 141

HTML markup within a Component JSX attribute

I'm unsure of some of the terminology for React elements so please excuse me if I'm off the mark.

My Issue

I've set up this component in my React web app.

const Title = ({lineContent}) => {

  let line1 = useRef(null);

  return (
    <h1 className="page-title">
      <div ref={el => line1 = el} className="line">
        {lineContent}
      </div>
    </h1>
  )
  
  };

and I'm pulling it through to a parent component:

<Title lineContent="Text for line one"/>

I want to wrap a <span> around a word within the lineContent="" attribute, so I can change it's colour.

<Title lineContent="Text for <span>line</span> one"/>

But it currently renders out the <span> tag as if it was standard text.

Is there any way of setting this up so that the <span> is recognised as HTML so I can style it in css? Any direction would be great appreciated!

Upvotes: 0

Views: 53

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53984

Yes, just pass the element it self instead of a string:

<Title
  lineContent={
    <>
      Text for <span>line</span> one
    </>
  }
/>

Upvotes: 1

Related Questions