Display component produced by function, replacing previous component on screen

Question

showButtons(1) displays the radio buttons for frame number 1, showButtons(400) displays the radio buttons for frame number 400.

This current code displays all radio buttons for each frame up to 400 BUT I want one set of radio buttons displayed starting at frame 1 and to progressively change until reached frame number 400 replacing the previous radio buttons on the screen each time.

I can't seem to get it, any help is greatly appreciated.

import React from "react";

const Test = (props)=> {

  const keys = props.test.map(frame => Object.keys(frame));
  const filteredKeys = keys.map(frame =>
    frame.filter(key => new RegExp(/^roi\d+$/).test(key))
  );
  if (filteredKeys.length === 0) return null;
  const showButtons = (frameNumber) => {
  return filteredKeys[frameNumber].map((roi, index) =>  (
      
        {`roi${index}`}
        
       
    ));
  };


    var answers = []
    for (var i = 1; i < 400; i++){
      answers.push(showButtons(i))
    }


  return (
    
      
    {answers}    
      
    
  );
};
export default Test;

Output.json file im working with in form:

[{"frame_number": 1, "roi0": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity0": 80.0, "roi1": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity1": 157.0},
{"frame_number": 2, "roi0": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity0": 80.0, "roi1": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity1": 158.0},
{"frame_number": 3, "roi0": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity0": 80.0, "roi1": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity1": 157.0},

user_1641941 · Answer

Ok, try one last time based on your comments:

const data = [
  {
    roi0: [], //never use these values in your code
    roi1: [],
  },
  {
    roi0: [],
    roi1: [],
    roi2: [],
  },
];
const Test = props => {
  const [currentFrame, setCurrentFrame] = React.useState(0);
  const frames = React.useMemo(() => {
    const keys = props.test.map(frame =>
      Object.keys(frame)
    );
    return keys.map(frame =>
      frame.filter(key => new RegExp(/^roi\d+$/).test(key))
    );
  }, [props.test]);
  const playing = currentFrame < frames.length - 1;
  React.useEffect(() => {
    let timer;
    const up = () => {
      setCurrentFrame(frame => frame + 1);
      timer = playing && setTimeout(up, 1000);
    };
    timer = playing && setTimeout(up, 1000);
    return () => clearTimeout(timer);
  }, [playing]);
  return (
    
      
        
      
      {currentFrame >= frames.length
        ? null
        : frames[currentFrame].map((roi, index) => (
            
              
                {`roi${index}`}
                
              
            
          ))}
    
  );
};

ReactDOM.render(
  ,
  document.getElementById('root')
);

Display component produced by function, replacing previous component on screen

1 Answers