How to pass contenteditable attribute to html?

Question

I want to make content editable by using contenteditable attribute. But when I add it to my component - it's nowhere to be found.

class CompName extends React.Component {
  render() {

    return (
      <div className="CompName" >
        <div contenteditable={true}>Somecontent</div>
      </div>
    );
  }
}

Tried using true as string as well. Am I missing something fundamental here? I'm fairly new to React..

I am using react-rails gem.

Answer 1

From the reactjs docs:

Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex.

You have to use contentEditable={true}:

class CompName extends React.Component {
  render() {

    return (
      <div className="comp-name" >
        <div contentEditable={true}>Somecontent</div>
      </div>
    );
  }
}

Haven't tried contenteditable html elements with react yet but i could imagine depending on how you want to use them you will encounter some issues without any further updating logic in your component.