HTML markup within a Component JSX attribute

Question

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!

Dennis Vash · Accepted Answer · 2020-09-24 13:13:41Z

1

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

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

answered Sep 24, 2020 at 13:13

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML markup within a Component JSX attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related