LaVOZs

The World’s Largest Online Community for Developers

'; javascript - React: How to pass an array as props and render a list of images? - LavOzs.Com

I am new to react. I want to loop images list(Json) and show these images on screen. So I want to create a prop with Array. But I don't know how to pass Array as props? Would you help take a look?

var images = [
  "./resources/bgdefault.jpg",
  "./resources/bg1.jpg",
  "./resources/bg2.jpg",
  "./resources/bg3.jpg",
  "./resources/bg4.jpg",
  "./resources/bg5.jpg",
  "./resources/bg6.jpg",
  "./resources/bg7.jpg",
  "./resources/bg8.jpg"
];

type State = {
  index: number;
};

type Props = {
  backgroundDuration: number;
  imagePath: Array<string>;
};

export class BackgroundImage extends React.Component<Props, State> {
  timerID: number;

  constructor(props: Props) {
    super(props);
    this.state = {
      index: -1
    };
    this.timerID=0;
  }

.....

  render() {
    const path:string = images[this.state.index];
    return (
      <div
        style={{
          width: "100%",
          height: "100%",
          backgroundSize: "cover",
          backgroundImage: `url(${path})`
        }}
      ></div>
    );
  }
}

You can pass any javascript variable to a prop. So for example, if you want to loop through an array of URLs and render an img tag for each:

// ImageList.js file

function ImageList (props) {
  const { images } = props

  return <div>{ images.map(imgUrl => <img src={imgUrl} />) }</div>
}

And in the parent component you'd have something like:

// App.js file

import ImageList from './ImageList'

function App () {
  const images = [
    "./resources/bgdefault.jpg",
    "./resources/bg1.jpg",
    "./resources/bg2.jpg",
    "./resources/bg3.jpg",
    "./resources/bg4.jpg",
    "./resources/bg5.jpg",
    "./resources/bg6.jpg",
    "./resources/bg7.jpg",
    "./resources/bg8.jpg"
  ]

  return <ImageList images={images} />
}

This example uses function components, but props and JSX work the same way with class components (just use this.props instead of props).

For rendering components based on a list or an array, you should use the javascript .map function, here you have the react docs about this:

https://es.reactjs.org/docs/lists-and-keys.htmlhttps://es.reactjs.org/docs/lists-and-keys.html

Sorry for the posting the link, I'm using my phone right now. Regards!

You can pass any type of JavaScript value as a prop:

<BackgroundImage imagePath={images} backgroundDuration={5000}/>

Your render function then accesses the prop as any other prop:

const path:string = this.props.imagePath[this.state.index];
return (
  <div
    style={{
      width: "100%",
      height: "100%",
      backgroundSize: "cover",
      backgroundImage: `url(${path})`
    }}
  ></div>
);

Related
How do I check if an array includes a value in JavaScript?
How to append something to an array?
How to insert an item into an array at a specific index (JavaScript)?
How do I empty an array in JavaScript?
How do I pass command line arguments to a Node.js program?
How to check if an object is an array?
How can I remove a specific item from an array?
How can I add new array elements at the beginning of an array in Javascript?
What is the difference between state and props in React?
How to pass props to {this.props.children}