Home » Javascript » List directory in React

List directory in React

Posted by: admin November 1, 2017 Leave a comment

Questions:

Is there anyway to list the directory contents in javascript/ES6 ?

I am developing a website using react and the site has an image gallery. Now I want this gallery to be dynamic so I don’t have to update the code everytime I want to add an image. I have the images stored on the server where I am hosting the webpage in a seperate directory for each gallery and every directory has a couple of images in it. My current solution is to hard-code every what images belongs to what gallery but there has to be a better solution.

I am using https://github.com/neptunian/react-photo-gallery if that matters. I also have access and can use a database to just store the filepaths but if there is another solution I’ll rather use that to avoid having to create an API for adding images.

Answers:

You should prune the data prior to sending it over the wire. After that, you can map over your Image element whatever that may be called and render out the images accordingly. If you are in redux, and want the pictures stored in state, update the redux store, otherwise you can setState with the photos in an array and use Array.map to map over them in JSX

Questions:
Answers:

React is client-side, so the files are actually being read from your server. So, all you have to do is add an ajax call from the client, that the server responds to with the img src addresses. So something like:

componentDidMount() {
 $.ajax({ 
  method: "GET",
  url: "http://adsafasdf.com/imagecategory"
 }).then(function(response) { 
  this.setState({ imagesArray: JSON.parse(response) })
 });
}

render() {
  const images = this.state.imagesArray.map((object) => {
    return <img src={object.src} />;
  });

  return (
    <div>
     { images }
    </div>
  )
}

I may have a few errors there, but you should get the idea. And, imagecategory you should bring in from category that is clicked, at least I think that’s how you’re doing it. Like this, everything should be fully dynamic.