CODEWITHSUNDEEP
javascriptreactjs
user13427723
user13427723

Reputation:

JS and REACT, Why gif isnt loading

I tried to add gif by link in my react code but its not working, can anyone say me why?? I want to add gif and create other web page for big gif and user's info but i can do that alone

import React from 'react';
import Cards from './Components/Cards/Cards'

class App extends React.Component {
  componentDidMount() {
    const { pageTitle } = this.state;
    document.title = pageTitle;
  }
  state = {
    cards: [
      { name: 'Arman', photo: 'https://media.giphy.com/media/YrqdSMxfthoEyAOLro/giphy.gif' },
      { name: 'Serge', photo: 'https://giphy.com/gifs/MDgEcS8CqqDxB2YClD/html5' },
    ],
    pageTitle: 'Cards'
  }

  render() {
    return (
      <div>
        <Cards
          name={this.state.cards[0].name}
          photo={this.state.cards[0].photo}
        />
        <Cards
          name={this.state.cards[1].name}
          photo={this.state.cards[1].photo}
        />
      </div >
    )
  }
}

export default App

//Cards

    import React from 'react';

    function Cards(props){
        return (
            <div>
                <h3>User name: {props.name}</h3>
                <p>User photo: {props.photo}</p>
                {props.children}
            </div>
        )
    }

    export default Cards

Upvotes: 1

Views: 1104

Answers (3)

Karan Singh
Karan Singh

Reputation: 400

  // App Component
  <div>
    {this.state.cards.map(card => {
       return <Cards
          name={card.name}
          photo={card.photo}
        />
       })
    }
  </div>

  //Child Component
  <div>
       <h3>User name: {props.name}</h3>
       <div>User photo: <img src={props.photo} /></div>
       {props.children}
  </div>

Upvotes: 0

user13427723
user13427723

Reputation: 

import React from 'react';
import Cards from './Components/Cards/Cards'

class App extends React.Component {
  componentDidMount() {
    const { pageTitle } = this.state;
    document.title = pageTitle;
  }
  state = {
    cards: [
      { name: 'Arman', photo: 'https://media.giphy.com/media/YrqdSMxfthoEyAOLro/giphy.gif' },
      { name: 'Serge', photo: 'https://giphy.com/gifs/MDgEcS8CqqDxB2YClD/html5' },
    ],
    pageTitle: 'Cards'
  }

  render() {
    return (
      <div>
        <Cards
          name={this.state.cards[0].name}
        />
        <img src={this.state.cards[0].photo}></img>            
      </div>
    )
  }
}

export default App

Upvotes: 0

galishmann
galishmann

Reputation: 681

Try to use photo property instead of link

<Cards
  name={this.state.cards[0].name}
  photo={this.state.cards[0].photo}
/>

Upvotes: 2

Related Questions