score:0
i dont use external components.i had the same problem, additionally i used to get the error that i cannot use dangerouslysetinnerhtml if i mark the div as content editable.my approach was similar to yours. so i didnt mark it as content-editable. just dangerouslysetinnerhtml. but in componentdidupdate i used the ref to setattribute of the div as "contenteditable=true". i used the same div to grab the div content to save. this stopped all warnings and errors.
componentdidupdate(){
this.htmlel.setattribute("contenteditable", true);
}
additionally if your dangerouslysetinnerhtml content contains react components, you can hydrate them to make them functional. but obviously you need to know which component is inside the div to hydrate it.
score:1
when you set contenteditable
you're letting the content be modified in the browser.
if you change the dom without react managing behind, react will warn you as this might cause issues when, for example, updating those elements. you are passing {this.props.children}
which comes directly from react, using contenteditable
will let your content be modified by a user in the browser, thus will might not be the same as react has no control anymore.
you can use suppresscontenteditablewarning={true}
to avoid that warning.
you either can use react.createelement
and pass an argument {contenteditable: true}
to avoid the warning (as like https://github.com/lovasoa/react-contenteditable is doing)
score:9
the component you stated is generating component calling react.createelement
as follows
and thus avoiding the warning:
function contenteditable(props) {
return react.createelement('div', {contenteditable: true});
}
whereas you are using jsx.
function contenteditable(props) {
return (<div contenteditable={true}></div>);
}
you can read more here about why react
warns you. if you want to suppress the warning you can also use
suppresscontenteditablewarning
attribute.
function contenteditable(props) {
return (<div contenteditable={true} suppresscontenteditablewarning={true}></div>);
}
Source: stackoverflow.com
Related Query
- Rendering ContentEditable component without getting ContentEditableWarning?
- React Router v4 - Pre-Mount Component Without Rendering
- Getting error "Cannot update a component while rendering a different component". What is the correct way to achieve what I'm attempting?
- the api block gets called 2 times, leads in rendering component twice, though conditions are getting checked properly
- React router v4 use declarative Redirect without rendering the current component
- Component is briefly rendering without styles on first render
- Taking React State (object of objects(example inside)) and getting an array of objects to map() for component rendering
- How to set a child component without rendering it in the parent component?
- getting error on conditional rendering with stateless component
- Rendering a redux component with and without children
- How to change React parent component size based on child component size without rendering child component?
- How to render only subchild without rendering all high level component
- React importing and rendering other component not working without tooling
- React component rendering without overlay
- Is there any difference between rendering a functional component with and without hooks?
- Rendering react component using typescript without passing in strongly typed props
- Data is not getting fetched before rendering component
- React how to pass state without rendering component
- Getting a JSON asynchronously and THEN rendering the component
- inline CSS style is not getting rendered [Previously: Component is not rendering its elements - react]
- Updating state without rendering the whole React component (useState)
- Link of react-router-dom updates the URL without rendering the component
- React: Creating A Component with ES6Class and rendering it without JSX
- Rerender Child without rendering parent component React js
- Create and download image of a react component without rendering it
- Getting data from API before rendering component React, Redux
- How can I change the URL without rendering another component or redirecting to a different route in React?
- Rendering same component both in try and catch block in React without loosing focus of fields in ReactJS
- Control html dynamically without component re rendering in React with Apollo
- How to open react component in new tab without rendering the whole app component?
More Query from same tag
- Pass child component value back to parent component
- How to write redux selector that handle several levels of nested state?
- State updating in redux
- React.js global variables erasing on routing
- Using React.createRef in class component has current as always null
- How to add external javascript in react app
- Jest testing hook state update with setTimeout
- Typescript express not working after switching to esnext
- Auth0 with React and TypeScript
- VSCode: Cannot find module 'antd' or its corresponding type declarations
- Error in Pure Componenet State in React-Redux
- How to access a child's state in React
- The <Link> from react-router-dom does not change the URL
- Error while rendering react components in angular app
- Resetting a form when using onBlur as opposed to onChange
- React Render UI Before Redirect
- Getting paginator from react-js-pagination to display on page
- Axios request returns 401 despite having an authorization header
- What are the best alternatives for javascript clientWidth in reactjs?
- Nothing was returned from render but I cant figure out why
- Change Value of Nested Array Dynamically
- How to map an array , and change the state asynchrony using react-hooks
- How to call a function which has a same name with a parameter
- How to add async attribute to script generated by react scripts (at the npm run build stage on the create-react-app template)
- Will Redux in React work only with Functional Components?
- Is it possible to combine talwind daisyUI with CSS variables?
- Encoding Accented Characters in React JS
- AXIOS multiple response and then()
- Define useSelector type from external file React Typescript
- Dispatch is not a function react