How can i throw the string with link in props without error in Component with lable

Question

I have a problem in React with props. I need to throw into my Component (into lable tag) string with a link. I'v done that and it works, but i have the error in browser console like "console.js:288 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."

My component looks like that

export default function CheckBox({ id, type = "checkbox", title, isError }) {
  return (
    <div className="checkbox">
      <input
        type={type}
        name={id}
        className={`checkbox__input ${isError && "checkbox__input_error"}`}
      />
      <lable htmlFor={id} className="checkbox__title">
        {title}
      </lable>
    </div>
  );
}

It works, but i have the error in browser console "console.js:288 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."

  const termsOfUseLableText = (
    <>
      I agree with{" "}
      <Link to="/" target="_blank">
        Terms of Use
      </Link>
    </>
  );

  <CheckBox id="termsOfUse" title={termsOfUseLableText} />

In this way i have no error in browser console, but my componen looks like "I agree with [object Object]"

  const termsOfUseLableText = (`
    I agree with{" "}
      ${<Link to="/" target="_blank">
        Terms of Use
      </Link>}
    
  `);

  <CheckBox id="termsOfUse" title={termsOfUseLableText} />

I have no idea how to solve that...

Answer 1

It seems that you have mis-spelt 'label' as 'lable'.

So in your code change:

<lable htmlFor={id} className="checkbox__title">
{title}
</lable> 

to

<label htmlFor={id} className="checkbox__title">
{title}
</label>