How can i get all image urls from my nasa api and add them into an image slider

  javascript, react-redux, reactjs, redux

This is my component of imageslider with button next and previous
I need som help how i can get individual img_src values and add them into another array and them use them in my image slider.

I welcome every solution corresponding to my aproach

const ImageSlider = () => {
  const dispatch = useDispatch();
  const ImageList = useSelector((state) => state.ImageList);

  const { loading, error, Images } = ImageList;

  useEffect(() => {
    dispatch(ListImages());
  }, [dispatch]);

  var items = [Images.photos];

  console.log(Images);

  const classes = useStyles();

  function Item(props) {
    return (
      <Paper>
        {props.item.map(data => (
         <img src={data.img_src} />
        ))}
      

        {({ onClick, className, style, next, prev }) => {
          return (
            <Button onClick={onClick} className={classes.button} style={style}>
              {next && "Next"}
              {prev && "Previous"}
            </Button>
          );
        }}
      </Paper>
    );
  }
 return (
    <>
      {loading ? (
        <Loader />
      ) : error ? (
        <h1>{error}</h1>
      ) : (
        <Carousel>
          {items.map((item, i) => (
            <Item key={i} item={item} />
          ))}
        </Carousel>
      )}
    </>
  );
};

export default ImageSlider;
```

Source: Ask Javascript Questions

LEAVE A COMMENT