Why React does not update and re-render the component when clicked on buttons?

Question

Here I use embed codepen library for react. When I click the buttons I want to change the active codepen component showing on the {activeCodePen}. But when I do console.log the activeCodePen I notice that it changes but rendered component on the screen does not change. How can I fix this?

I tried both setActiveCodePen(() => renderCodePen(1)) or setActiveCodePen(renderCodePen(1))

const PageNotFound: React.FC = () => {

  function renderCodePen(index: number){
    switch (index) {
      case 1:
        return <ReactCodepen user="MichaelKhalifar" hash="JjZYENK" height={700}  loader={() => <div>Loading...</div>} themeId="31205" /> 
      case 2:
        return <ReactCodepen user="saifkeralite" hash="GRGyKEz" height={700}  loader={() => <div>Loading...</div>} themeId="31205" /> 
      case 3:
        return <ReactCodepen user="saifkeralite" hash="yLBQaaY" height={700}  loader={() => <div>Loading...</div>} themeId="31205" /> 
      default:
        return <ReactCodepen user="saifkeralite" hash="yLBQaaY" height={700}  loader={() => <div>Loading...</div>} themeId="31205" />
    }
  }

  const [activeCodePen, setActiveCodePen] = useState(renderCodePen(1));

  return (
    <div className={styles.mainContainer}>
      {activeCodePen}
      <button onClick={() => {setActiveCodePen(() => renderCodePen(1))}}>1</button>
      <button onClick={() => {setActiveCodePen(() => renderCodePen(2))}}>2</button>
      <button onClick={() => {setActiveCodePen(() => renderCodePen(3))}}>3</button>
    </div>
  );
};

Wraithy · Accepted Answer · 2023-01-27 11:06:06Z

1

I would suggest to not store whole component in state, but instead store only index:

const PageNotFound: React.FC = () => {

  function renderCodePen(index: number){
    switch (index) {
      case 1:
        return <ReactCodepen user="MichaelKhalifar" hash="JjZYENK" height={700}  loader={() => <div>Loading...</div>} themeId="31205" /> 
      case 2:
        return <ReactCodepen user="saifkeralite" hash="GRGyKEz" height={700}  loader={() => <div>Loading...</div>} themeId="31205" /> 
      case 3:
        return <ReactCodepen user="saifkeralite" hash="yLBQaaY" height={700}  loader={() => <div>Loading...</div>} themeId="31205" /> 
      default:
        return <ReactCodepen user="saifkeralite" hash="yLBQaaY" height={700}  loader={() => <div>Loading...</div>} themeId="31205" />
    }
  }

  const [activeCodePen, setActiveCodePen] = useState(1);

  return (
    <div className={styles.mainContainer}>
      {renderCodePen(activeCodePen)}
      <button onClick={() => {setActiveCodePen(1)}}>1</button>
      <button onClick={() => {setActiveCodePen(2)}}>2</button>
      <button onClick={() => {setActiveCodePen(3)}}>3</button>
    </div>
  );
};

I am not really sure why your solution dont work, it may be caused because your ReactCodepen components have the same "key" so react dont know that something changed.

Try this solution, it should work

answered Jan 27, 2023 at 11:06

Wraithy

2,0961 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shifty Over a year ago

well I tried and also put <p>{activeCodePen}</p> to display the number on the screen. But when I click the buttons number changes but <ReactCodePen /> does not change.

Wraithy Over a year ago

then try to set "key={index}" in reactCodepen components if it helps

Collectives™ on Stack Overflow

Why React does not update and re-render the component when clicked on buttons?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related