I am trying to create a component which can be edited. It is something like this:
<div contentEditable={true}>
<OtherComponent />
</div>
I have a JSON which contains text and is rendered on the screen using this component. When I add a new paragraph in that text, DOM automatically creates a p tag with that paragraph's text. On click of save button, I save that newly added text in the JSON and call the setState method so that now the JSON can be re-rendered with the new text. On re-render, I do the see the new text, but I see it twice. Turns out, when the DOM has earlier created a p tag, React doesn't remove it on re-render. I don't want the old text to still appear on the page.
I read somewhere that when React re-renders the component (when we do setState), it only re-renders the nodes in its virtual DOM. The nodes which are created otherwise (like the p tag in my case), are not touched by React.
Is there some way I can have a solution to my problem and not see the same text twice?
Related
I was poking around the select component of React MUI and there's a specific functionality about it which boggles me.
The element does not render its children in the browser, its just the button. However, when the value is changed from outside ( emulated with a setTimeout at the bottom of the file), it somehow figures out what text value it should display in the button.
The select component is not passed an array of all of the options, along with a key, as props, which would help it figure out what text it should render, so how does it figure it out?
Does it render its children within one browser frame ( so that it is not visible ), read the right value from the element, then hide them again?
The relevant code is at the bottom of the demo
https://stackblitz.com/edit/react-xzjhpf?file=demo.tsx
I have an editor made with draftjs. If I have previous content, it is filled with that content.
I need to track the clicks. When I click, for example, in the middle of the content and start writing, I will write at the beginning of the editor ... :/
How can I do that?
Your component must have been re-rendering some how when you start typing in it. You should stop that re-render or may be assign the newly got state to the Editor if it re-renders
I've got an app that shows a list of items in a grid. Some of the items have an embedded video which flashes or stops playing (if it's already playing) when it's rerendered.
The list is maintained in Redux. When the user scrolls to the bottom of the page it loads more results which causes the Redux state to update which, in turn, causes the grid to rerender all of the items plus the new items.
I'm looking for a solution that will just add more items to the end of the grid instead of rerendering everything.
I've got a component that holds the entire grid. It renders a component for each item in the grid. In each item I have a component that holds the embedded video.
Any ideas?
If each item in the grid is a component, like you said, you should use React.memo (for functional compoents) or Reat.PureComponent (for class components). It will prevent the component from rerendering if the props have not changed. I can't guarantee your videos will keep playing, but if the only reason they stop playing or flash is because the component is being rerendered then it should fix the problem.
Maybe this can help: when passing information from redux to your component, try to update the list of the objects instead of sending a new one
It's redux UpdateObject method.
I'm making a chat interface in ReactJS, and each item in the chat log displays the same avatar icon over and over again. Currently the problem I'm facing is that when new items are added the chat log, this image blinks in every list item, which does not look very presentable.
I want to know if there is a way to reuse the Component (most probably not) or the bitmap data, so that once loaded in memory, it can be shown more quickly without a perceivable blink. I have tried using data URL, but not to much avail.
Per request in comments further details:
I have a separate Component to show each chat log item. It contains an Image component to show the avatar.
On the top log I'm using a FlatList and in the renderItem I'm rendering the said chat log component. Whenever any message is sent or received it is appended to the array that the data in the FlatList is pointing to.
Whenever an item is added the list gets re-rendered causing the Image to be created again (I have searched but haven't found any good away of appending items to a FlatList without affecting existing children). Therefore I believe the solution lies in making the image load faster so that the re-render is not so perceivable.
One reason I think of the flickering is if you reassign the key of list items and forcing it to re-render. Check if there is any such case. Thats one of the main reasons component to re-render on listviews.
I ended up in a quite awkward situation where I have to manually alter a React component before it get's rendered.
I'm using draft.js and have created a CompositeDecorator.
The decorator returns a react object that is styled just the way I want, but I need to replace the text of that component before I render it.
I can see that the object has a props property, that has a text property inside it. This is the text I want to change, but that property is readonly.
I can't do it the normal react way, since I don't control the part of the application that actually creates this component.
Are there any way to change this property, or to create a copy of this component that is an exact copy except for the text property?