0

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.

Aurimas
  • 2,577
  • 5
  • 26
  • 37

2 Answers2

2

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.

trixn
  • 15,761
  • 2
  • 38
  • 55
1

You should pass it as contentEditable not contenteditable. This is not html, it's JSX. You should follow the JS convention while passing attributes.

https://facebook.github.io/react/docs/dom-elements.html

Etherealm
  • 2,234
  • 3
  • 18
  • 34
  • https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable – Etherealm Jun 27 '17 at 23:20
  • It worked! .. so react knows all the possible html attributes? And accordingly it only allows those? – Aurimas Jun 27 '17 at 23:20
  • @Aurimas Yes. [Read here](https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes) for a list of supported attributes. – trixn Jun 27 '17 at 23:30