Component re-render issue [Snippet Attached]

Question

I am making a resume builder application and the whole structure was almost done.

Complete working codesandbox:

Here I have made compo

Answer 1

It's very simple - you need to store editors state in your parent component. Try to use BasicDetails state for this.

Answer 2

This is a great question. This is basically a design approach issue: For a scenario like yours, you need to design your component this way:

let's analyze the picture:

MAIN COMPONENT:

This is the component that should hold the state for the entire form-filling process. STE1-4 Are just views that allows you to input data that must all be updated in the main component. So This means, you must have state in main component and pass the state properties and props, including their update/setter methods.

STEP COMPONENT This applies for all Step Components. These components should do nothing except display the form step using state values received via props and update state by using setter methods, which are also received via props.

---

Conclusion:

Put your state in your main component, each step component should only display the form and update the main state. This means that by the time each step component is re-rendered, it will receive values updated in the main component. And you will achieve that via props.

Answer 3

This happens because we're only saving our EditorContainer value to our Context, but we're not using it when we rerender the EditorContainer component.

---

The fix would be to pass the saved value as prop to our EditorContainer component.

Then before we render the EditorContainer, we'll convert that value to EditorState which can be done using convertFromHTML function, and set that as our editorState state.

Step 1: Pass value prop to EditorContainer

// basic_details.js
<EditorContainer
 name="profileSummary"
  value={basicDetails.profileSummary}
  onChange={(event) => handleInputChange(event)}
/>

// employment_details.js
<EditorContainer
  name="description"
  value={inputField.description}
  onChange={(event) => handleInputChange(index, event)}
/>

Step 2: Convert the value prop to EditorState

// text_editor.js
...

componentDidMount() {
  // https://draftjs.org/docs/api-reference-data-conversion/#convertfromhtml

  const { value } = this.props;
  const blocksFromHTML = convertFromHTML(value);
  const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap,
  );

  const editorState = EditorState.createWithContent(state);
  this.setState({ editorState });
}

That's it! Check the demo below.

Edit Fix demo to check value if is string.