I have index.js file where I have rendered the App ponent .

Index.js file

ReactDOM.render(<App />, document.getElementById('root'));

Below is the code for SettingContainer.js file where I have SettingContainer ponent. I have a button on click of it I need to rerender <SettingContainer value="10" /> But It doesn't render with defaultvalues.

SettingContainer.js file:

import React from 'react';

const SettingContainer = (props) => {
    const [state, setState] = React.useState({
        currentValue: props.value
    });

    const handleChange = (event) => {
        setState({ currentValue: event.target.value });
    };

    return (
        <React.Fragment>
            <input type='text' value={state.currentValue} onChange={handleChange} />
        </React.Fragment>
    )

};

export default SettingContainer;

Below is the code for the App.js file where I have App ponent.

App.js file

const handleClick = () => {
  ReactDOM.render(<SettingContainer value="10" />, document.getElementById('divHello'));
};

const App = () => {
  return (
    <>
      <div id="divHello">
        <SettingContainer value="10" />
      </div>
      <button onClick={handleClick}>Button</button>
    </>
  );
};

export default App;

I have index.js file where I have rendered the App ponent .

Index.js file

ReactDOM.render(<App />, document.getElementById('root'));

Below is the code for SettingContainer.js file where I have SettingContainer ponent. I have a button on click of it I need to rerender <SettingContainer value="10" /> But It doesn't render with defaultvalues.

SettingContainer.js file:

import React from 'react';

const SettingContainer = (props) => {
    const [state, setState] = React.useState({
        currentValue: props.value
    });

    const handleChange = (event) => {
        setState({ currentValue: event.target.value });
    };

    return (
        <React.Fragment>
            <input type='text' value={state.currentValue} onChange={handleChange} />
        </React.Fragment>
    )

};

export default SettingContainer;

Below is the code for the App.js file where I have App ponent.

App.js file

const handleClick = () => {
  ReactDOM.render(<SettingContainer value="10" />, document.getElementById('divHello'));
};

const App = () => {
  return (
    <>
      <div id="divHello">
        <SettingContainer value="10" />
      </div>
      <button onClick={handleClick}>Button</button>
    </>
  );
};

export default App;

• javascript
• reactjs
• ponents
• react-ponent

• What exactly are you trying to acplish? – Dominik Matis Commented Feb 22, 2020 at 18:35
• I need to rerender settingContainer with defaultValues on click of button which is outside of that ponent.. – Ronak Commented Feb 22, 2020 at 18:36
• maybe using Redux ? – Dominik Matis Commented Feb 22, 2020 at 18:41
• 1 No Dear @DominikMatis, please no, Redux is good but not for this tiny situation. it could have an upper state for it. – AmerllicA Commented Feb 22, 2020 at 18:49
• Well, I don't think you should render two ponents separately ... All should be in App – Dominik Matis Commented Feb 22, 2020 at 18:50

2 Answers 2

Actually, your issue es back to your mindset, you should change your thoughts about ReactJS. you should have an Index container like below:

const Index = () => {
  const [isRender, renderSettingContainer] = useState(false);

  return (
    <>
      {isRender && (
        <SettingContainer />
      )}
      <App onClick={renderSettingContainer}>
    </>;
  );
};

Then, pass the onClick function from props to the App like below:

const App = ({ onClick }) => (
  <>
    Hello Friends
    <div id="divHello">

    </div>
    <button onClick={onClick}>Button</button>
    </>
  );

Also, there is no need to use ReactDOM twice, so write it like below:

ReactDOM.render(<Index />, document.getElementById('root'));

If you have any questions, write a ment, definitely, I will answer and will change my answer.

Hint: the <></> is just like <React.Fragment></React.Fragment> with less code and better performance, based on Dan Abramov idea.

Use conditional rendering, on press button set value to display Hello ponent.

const Hello = () => (<p>Hello</p>)

Then in App set value to true on button press.

const App = () => {

  const [displayHello, setDisplayHello] = useState(false);

  const handleClick = () => {
    setDisplayHello(!displayHello)
  };

  return (
    <React.Fragment>
     Hello Friends
    <div id="divHello">

    </div>
    {displayHello && <Hello />}
    <button onClick={handleClick}>Button</button>
   </React.Fragment>
 );
};

// Get a hook function
const {useState} = React;

const Hello = () => (<p style={{ backgroundColor: 'green', color: 'white'}}>Hi from Hello Component</p>)

const App = () => {

    const [displayHello, setDisplayHello] = useState(false);
  
    const handleClick = () => {
      setDisplayHello(!displayHello)
    };
  
    return (
      <React.Fragment>
       Hello Friends
      <div id="divHello">
  
      </div>
      {displayHello && <Hello />}
      <button onClick={handleClick}>Button</button>
     </React.Fragment>
   );
  };


// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>