React: Check Array if string matches and set state

Question

I have the following Array:

[
    "/test/static/media/its9-odc_d.9d5de720.png",
    "/test/static/media/its9-odc_m.178c1879.png",
    "/test/static/media/its9-odc_w.5e70ca59.png",
    "/test/static/media/its9-odc_y.8cf41473.png"
]

When I click on a Button, either _d, _m, _w or _y is saved in a React state (timeperiods).

I need a function which should save the string which matches my timeperiods in another React state (imageSource), so I can render the image.

This is what I tried so far but I always get returned 'yay' and when I try to setImageSource I get an error for infinite loop.

  const imageForTimeperiod = () => {
    images.forEach((img) => {
      if (timeperiod && img.split('.')[0].includes(timeperiod)) {
        console.log('yay');
        // setImage(img);
      }
    })
  };

{Object.entries(Timeperiods.timeperiods).map((entries) => {
    return (
        <Button onClick={() => setTimeperiod(entries[1].file)}>
            {entries[0]}
        </Button>
    );
})}

In the end:

I click on Button 1 Day, it sets timeperiod to _d and I show the image /test/static/media/its9-odc_d.9d5de720.png.

SILENT: I get an error for infinite loop when doing that. @HassanImam Yes thats what I want to achieve. — mrks
– mrks, Commented Dec 7, 2021 at 17:38

Hassan Imam · Accepted Answer · 2021-12-07 18:19:10Z

1

You can pass the name of timeperiod on clicked button and then based on the name set the image and timePeriod state.

const { useState } = React;

const App = () => {
  const [image, setImage] = useState(null);
  const [timePeriod, setTimePeriod] = useState(null);
  
  const images = [
    "/test/static/media/its9-odc_d.9d5de720.png",
    "/test/static/media/its9-odc_m.178c1879.png",
    "/test/static/media/its9-odc_w.5e70ca59.png",
    "/test/static/media/its9-odc_y.8cf41473.png"
  ];
  
  const timePeriods = ['_d', '_m', '_w', '_y'];

  const handleClick = (v) => {
    const foundImage = images.find(name => name.includes(v));
    setImage(foundImage || null);
    setTimePeriod(v);
  }


  return <div>
  {timePeriod}
  <br />
  {image && <img src={image} />}
  <br />
  {timePeriods.map((v, i) => {
    return (
       <button onClick={() => handleClick(v)}>
          {v}
       </button>
    )
  })}
  </div>
}

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

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

edited Dec 7, 2021 at 18:19

answered Dec 7, 2021 at 17:40

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

2 Comments

mrks Over a year ago

I am not sure if I am right but is your solution based on a fixed order of the image array? My images are getting replaced with other names, so only the last 2 characters are always the same. Thats why I have to match the image string with the chosen button.

Hassan Imam Over a year ago

See the update solution, it uses name of timeperiod and then searches in image array.

Collectives™ on Stack Overflow

React: Check Array if string matches and set state

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