React json rendering cat images

react-images
react array of images
react image gallery
react render props functional component
react-photo gallery
react render function
react image example
react image gallery tutorial

I cant seem to get my react project to work. I am trying to create a application that will display random cat images, I have included the code and the api link here https://aws.random.cat/meow

If anyone can help me figure out how to get this to work, I would really apprectiate it, I think my problem is in my map function. I am new to using React and am trying to learn more. Thank you

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ICS 211 - React</title>
		<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
		<script type="text/babel">
			
			class Application extends React.Component {

				constructor(props) {
					//super is calling the constructor from react component
					super(props);
					//seting the state
					this.state = { cats: [] };
				};
				//we want to fetch the api and take the value it returns and set it equal to data
				componentDidMount() {
					(async () => {
						try {
							//change
							const response = await fetch('https://aws.random.cat/meow');
							if (!response.ok) throw Error(response.status + ': ' + response.statusText);
							const data = await response.json();
							//change
							this.setState({ cats: data });
						}catch(error){
							console.log('Fetch API Error: ' + error);
						}
					}) ();
				}
				
				render() {
					return (
						<div>
						
						<StyledTitle />
							<ol>
								{this.state.cats.map(cat => <StyledApplication key={cat.file}/>)}
							</ol>
						</div>
					);
				}
			}
	
			
		
			//structure and style for the Title object
			const Title = ({ className }) => (
				<div className={className}>
					<h1>random cats</h1>
				
				</div>
			);

			const StyledApplication = styled(Application)`
			background-color: white;
			padding: 15px;
			color: lightgreen;`;

			const StyledTitle = styled(Title)`
			font-size: 45pt;
			font-family: sans-serif;
			color: #6699ff;
			padding: 3%;
			border: solid green 2px;
			background: lightgreen;`;
			
	
			
			//structure and style for the Movie object
			// link,name,checked is the json object
			const struct = ({ className, file }) => {

					return <li className={className}>{className}: <a href={file}>{file}</a></li>
			
			};
			



			ReactDOM.render(
				<Application/>,
				document.getElementById('container')
			);
		</script>
	</head>
	<body>
		<div id="container"></div>
	</body>
</html>

Here are some tips that can solve your problem

  1. USE SPREAD OPERATOR TO PUSH ELEMENTS TO THE CATS ARRAY

You have initialized cats as an array and in order to push the data returned in response use spread operator like this

this.setState({ cats: [...data] });

  1. RETURN KEYWORD IS MISSING IN MAP FUNCTION

You have to specify what is returning from map function like this

{this.state.cats.map(cat => return <StyledApplication key={cat.file}/>)}

moreover, if you check the iterator you have passed in map function is cats but in prop key you are passing cat.item you need to correct that as well like i did above.

  1. USE AXIOS (optional)

In order to make network requests make use of axios package. Axios makes it easy to send asynchronous HTTP requests to REST endpoints

Hope this helps

Simple image gallery react component, Building an image gallery in react is really easy - build one in 70 'HelloWorld' component - you can actually just edit HelloWorld.js and Wherever you are rendering your component, provide the imageUrls Or if you want more than 3 images to show up - feel free to find and add even more cat pics. React PhoneCat Re-writing the AngularJS tutorial in React. Aaron O’Connell of 42floors recently documented his backbone-powered rewrite of the AngularJS PhoneCat tutorial. While I don’t support the notion of using Lines Of Code as a metric of comparison (more on that later), I found his step-by-step walkthrough quite insightful.

Whatever you are doing that's correct but your api response is an object what I can see. And you are trying to loop through that object. Hence it's not working. Either change the api response or format the api response data and make it an array.

Render Props – React, A component with a render prop takes a function that returns a React element For example, let's say we have a <Cat> component that renders the image of a� Server-Side Rendering and bundlers. If the application is being built with a bundler (most likely Webpack) and Server-Side Rendering is enabled then make sure to build the server-side code with the bundler too so that require() calls for assets (images, styles, fonts, etc) inside React components don't break (see universal-webpack, for example).

The API returned an object and map function is for array. You should do something like this:

state = {
    cat: null
}

render() {
    const { cat }= this.state;
    return (
        <div>
             <StyledApplication key={cat.file}/>
        </div>
    )
}

If you want an array of object, do the following

state = {
    cats: []
}

componentDidMount() {
    ...
    const { cats } = this.state;
    // Clone the array because of immutability 
    const copy = cats.map(c => {...c});
    copy.push(data);
    this.setState({ cats: copy });
    ...
}

render() {
    const { cat }= this.state;
    return (
        <div>
             <StyledApplication key={cat.file}/>
        </div>
    )
}

JSON APIs and Ajax: Render Images from Data Sources , JSON APIs and Ajax: Render Images from Data Sources The last few the JSON array contains an imageLink key with a value that is the URL of a cat's image. This repeated differentiating and rendering of components can be one of the primary sources of React performance issues in any React app. Building a React app where the differentiating algorithm fails to reconcile effectively, causing the entire app to be rendered repeatedly which is actually causing wasted renders and that can result in a

React- Requesting an image from an API - Back End Help, Hello everyone, I am trying to build an app in React that shows a small The info is all set, using the placeholder JSON, However I am having So, it would be good to have a spinner/loading if condition before rendering, then, with the Cat Command in Linux CSS Background Image HTML Background� Install and configure Rendertron as a middleware for dynamic rendering; The sample web app The “kitten corner” web app uses JavaScript to load a variety of cat images from an API and displays them in a grid.

Importing images in React - JavaScript, Hi everyone, I'm making a portfolio in React and I have a question. statement for each separate image when you want to render them dynamically, day Then you can be clever in images.js to pull the correct prefix based on the Cat Command in Linux CSS Background Image HTML Background Color� It must be a regular React component, accepting not only a source attribute, but also a record attribute. React-admin will inject the record based on the API response data at render time. The field component only needs to find the source in the record and display it. For instance, here is an equivalent of react-admin’s <TextField> component:

Create Pages from JSON With Images from @jlengstorf on , In this video, you'll create product pages from a JSON file and add images to the pages. This video starts Then we need to give it a component, which is how we render the template. This is a We'll create a folder called templates, and we'll create a file, a React component called product.js. Finally I can see David's cat. I am creating a game in React. Basic description: Sheep images are being ‘fired’ from the center of the screen and they are animated to move to the borders. If they reach it, you lose. If you click on them before, they disappear, and you continue. I have made everything, except the counter which counts how many sheeps you have clicked on. Description code: <MainComponent // everything else

Comments
  • You can't map over an object.
  • Ohhh... okay so what can I do instead? how can I make this functional
  • You should push the link to an array in your state, and then map over the array instead.
  • Can you show me how you would fix it? got a exam tomorrow, and took way to many classes. this is 80% of my exam, being able to render json using react. I gotta nail this down tonight
  • Try using this.setState({ cats: [...this.state.cats, data] }). It would be better to just push the link, though, not an object, i.e. this.setState({ cats: [...this.state.cats, data.file] }). You would have to change your other component to fix this
  • Thanks, ill try it out but im having a hard time. Just want to see what a working version would look like, so i can see the mistakes more clearly. I am more of a visual learner
  • It does not work because key is a reserved props and you should not use key as a props for StyledApplication. Also it would be best if you tell me how it doesn't work instead of staying it doesn' work
  • check my changes to the code , not iterating over the cats array instead using cat
  • You changed this.state.cats(cats => ... ) to this.state.cats(cat => ... ). But this is still iterating over the array. this.state.cats is an array. state = { cats: [] } is an array.