Hi i am stuck in a problem when Am trying to display movie image in top of the webpage its isn't showing don't know where i am wrong please help
i want to display movie banner top of the webpage
https://ibb.co/QprbB5n
Banner.js
This is my Banner page where i wrote whole logic
import React, { Component } from 'react';
import './Banner.css';
import Request from './Request';
import Axios from 'axios';
class Banner extends React.Component {
constructor(props) {
super(props)
this.state = {
movies: []
}
}
fetchData = async () => {
const movies = await Axios.get(Request.fetchNetflixOriginals)
this.setState({
movies: movies.data.results[
Math.floor(Math.random() * movies.data.results.length - 1)
]
});
console.log(movies);
return movies;
}
componentDidMount() {
this.fetchData();
}
render() {
// const {movies} = this.state
return (
<header className='banner'
style={{
backgroundSize: 'cover',
backgroundImage: `url(
"https://image.tmdb.org/t/p/original/${this.props.movies?.backdrop_path}"
)`,
backgroundPosition: 'center center',
}}
>
<div className='banner-contents'>
<h1>
{this.props.movies?.title || this.props.movies?.name || this.props.movies?.original_name}
</h1>
<div className='banner_button'>
<button className='banner_button'>Add</button>
<button className='banner_button'>Delete</button>
</div>
</div>
</header>
)
}
}
export default Banner;
Related
It is required to make the functionality when there is no more data to show.
Here is the code:
import React from "react";
import { adultPack } from "../../../../static/data/packsData";
import TinderCard from "react-tinder-card";
import GameNavbar from "../../Containers/Game_Navbar";
const gif = "https://media.giphy.com/media/RJ2Eet1AB4IOVERF8N/giphy.gif";
export default class AdultPack extends React.Component {
constructor() {
super();
this.state = {
questions: [],
randomQuestions: [],
isLoading: true,
};
}
componentDidMount() {
const shuffled = adultPack.sort(() => Math.random() - 0.5);
this.setState({
randomQuestions: shuffled,
});
}
render() {
return (
<div className="game">
<GameNavbar />
{this.state.randomQuestions.map(function (item, i) {
return (
<TinderCard className="swipe">
<div className="game__content">
<div className="game__content-game">
<div className="game__content-game-title">
<span>Я никогда не</span>
</div>
<h5>{item}</h5>
</div>
</div>
</TinderCard>
);
})}
<img src={gif} alt="Gif" className="game__gif" />
</div>
);
}
}
So, when the data ends after cards scroll, it is shown only blank page. It is required to loop all the items from the "adultPack"
I've been looking for about 2 hours into why I am not displaying any of the information to the page. I've console logged my response from a simple random quote api and it shows, Author: and Quote: in the console, however these are not appearing in my fields, All I am seeing is the button.
import React, { Component } from 'react';
import QuoteMachine from './Quotemachine';
const END_POINT = 'https://random-quote-
generator.herokuapp.com/api/quotes/random';
class App extends Component {
constructor(props) {
super(props);
this.state = {
quote: {
text: '',
author: ''
}
}
}
getQuote() {
fetch(END_POINT)
.then(response => response.json())
.then(response => {
this.setState = ({
quote: response
});
console.log(response);
})
}
componentDidMount() {
this.getQuote();
}
render() {
return (
<div className="App">
<div className="container">
<QuoteMachine quote= {this.state.quote} />
<button id="new-quote" className="primary-color-
background" onClick={() => this.getQuote()}>New quote</button>
</div>
</div>
);
}
}
export default App;
And then here is my Quotemachine.js
import React from 'react'
import PropTypes from 'prop-types';
const QuoteMachine = (props) => {
return (
<div className="quote-box">
<div className="text">
<span>{props.quote.text}</span>
</div>
<div className="author">
<span >{props.quote.author}</span>
</div>
</div>
);
};
QuoteMachine.propTypes = {
quote: PropTypes.object.isRequired
};
export default QuoteMachine;
It is only displaying the button, but the console.log shows
Object
author:
"Thomas Henry Huxley (1825-1895)"
quote:
"Try to learn something about everything and everything about something."
proto
:
Object
Install React Developer Tools plugin and check if your state is changing after the API call
Maybe this doesen't even look like a code, but is there any way I can change other components value/state on click?
import React from 'react';
import './pokemonList.css';
import {Component} from 'react';
import Pokemon from './Pokemon';
class PokemonList extends Component {
constructor(props){
super(props);
this.state = {
pokemons : [],
pokemon : {}
};
}
componentWillMount(){
fetch('https://pokeapi.co/api/v2/pokemon/').then(res=>res.json())
.then(response=>{
this.setState({
pokemons : response.results,
});
});
}
handleClick(id) {
fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`)
.then(res => res.json())
.then(data => {
const pokemon = new Pokemon(data);
this.setState({ pokemon: pokemon });
})
.catch(err => console.log(err));
console.log("click happened");
}
render(){
const {pokemons} = this.state;
return (
<div className='pokemonList'> {pokemons.map(pokemon =>(
<button onClick={this.handleClick.bind(this)} className='pokemon-
btn' key={pokemon.name}>
{pokemon.name}
</button>
))}
</div>
)
}}
export default PokemonList;
At this point I'm not even sure where does handleClick() has to be, so I put it in my App component aswell. The output is ok, but clicking these buttons doesen't seem to do anything. They are supposed to show detailed pokemon information in component.
import React, {Component} from 'react';
import './pokemon-info.css';
const PokemonInfo = ({ pokemon }) => {
const { name,
height,
weight,
sprite,
statsSpeed,
statsSpecialDefense,
statsSpecialAttack,
statsDefense,
statsAttack,
statsHp
} = pokemon;
return (
<section className="pokemonInfo">
<img src={sprite} className='sprite-image' alt="pokemon_sprite"/>
<div className='data-wrapper'>
<h3 className="data-char">{pokemon.name}</h3><br />
<p className = 'data-char'>Height: {height}</p>
<p className = 'data-char'>Weight: {weight}</p><br />
<p className = 'data-char'>Stats: </p><br />
<p className = 'data-char'>Speed: {statsSpeed}</p>
<p className = 'data-char'>Special defense: {statsSpecialDefense}</p>
<p className = 'data-char'>Special attack: {statsSpecialAttack}</p>
<p className = 'data-char'>Defense: {statsDefense}</p>
<p className = 'data-char'>Attack: {statsAttack}</p>
<p className = 'data-char'>Hp: {statsHp}</p>
</div>
</section>
)
}
export default PokemonInfo;
Here is my App component
import React, { Component } from 'react';
import './App.css';
import PokemonList from './PokemonList';
import Pokemon from './Pokemon';
import PokemonInfo from './PokemonInfo';
class App extends Component {
constructor() {
super();
this.state = {
pokemon: {}
};
this.handleOnClick = this.handleOnClick.bind(this);
}
handleOnClick(id) {
fetch(`http://pokeapi.co/api/v2/pokemon/${id}/`)
.then(res => res.json())
.then(data => {
const pokemon = new Pokemon(data);
this.setState({ pokemon });
})
.catch(err => console.log(err));
}
render() {
return (
<div className="App">
<PokemonList />
<PokemonInfo pokemon={this.state.pokemon}/>
</div>
);
}
}
export default App;
It is obvious I did go wrong somewhere, but where?
Update:
Pokemon
class Pokemon {
constructor(data) {
this.id = data.id;
this.name = data.name;
this.height = data.height;
this.weight = data.weight;
this.sprite = data.sprites.front_default;
this.statsSpeed = data.stats[0].stats.base_stat;
this.statsSpecialDefense = data.stats[1].stats.base_stat;
this.statsSpecialAttack = data.stats[2].stats.base_stat;
this.statsDefense = data.stats[3].stats.base_stat;
this.statsAttack = data.stats[4].stats.base_stat;
this.statsHp = data.stats[5].stats.base_stat;
}
}
export default Pokemon;
Your App component should keep the state and pass updater functions as props to children components:
PokemonList
import React from "react";
import "./pokemonList.css";
import { Component } from "react";
import Pokemon from "./Pokemon";
class PokemonList extends Component {
render() {
const { pokemons } = this.props;
return (
<div className="pokemonList">
{pokemons.map(pokemon => (
<button
onClick={() => this.props.handleClick(pokemon.id)} // id or whatever prop that is required for request
className="pokemon-btn"
key={pokemon.name}
>
{pokemon.name}
</button>
))}
</div>
);
}
}
PokemonInfo - no change here.
APP
import React, { Component } from "react";
import "./App.css";
import PokemonList from "./PokemonList";
import Pokemon from "./Pokemon";
import PokemonInfo from "./PokemonInfo";
class App extends Component {
constructor() {
super();
this.state = {
pokemon: {},
pokemons: [],
};
this.handleOnClick = this.handleOnClick.bind(this);
}
componentDidMount() {
fetch("https://pokeapi.co/api/v2/pokemon/")
.then(res => res.json())
.then(response => {
this.setState({
pokemons: response.results
});
});
}
handleOnClick(id) {
fetch(`http://pokeapi.co/api/v2/pokemon/${id}/`)
.then(res => res.json())
.then(data => {
const pokemon = new Pokemon(data);
this.setState({ pokemon });
})
.catch(err => console.log(err));
}
render() {
return (
<div className="App">
<PokemonList pokemons={this.state.pokemons} handleClick={this.handleOnClick} />
<PokemonInfo pokemon={this.state.pokemon} />
</div>
);
}
}
More on lifting the state up.
I'm having problem with sliding menu in just one item.
When I click on the config button every item shows menu. I tried to figure out something by passing props {mail.id} but I'm afraid I don't understand this.
I would like to have sliding menu just in one item -- the clicked one.
This is ConfigButton
import React, { Component } from "react";
import './Menu.css';
class ConfigButton extends Component {
render() {
return (
<button className="configButton"
onClick={this.props.onClick}
>
<i className="configButtonIcon fas fa-cog"></i>
</button>
);
}
}
export default ConfigButton;
And this is the Component which renders:
import React, { Component } from 'react';
import { NavLink, HashRouter } from 'react-router-dom';
import axios from 'axios';
import Menu from './Menu';
import ConfigButton from './ConfigButton';
const API = myAPI;
const navLinkStyle = {
textDecoration: 'none',
color: '#123e57'
};
class Emails extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
mails: []
};
this.handleMouseDown = this.handleMouseDown.bind(this);
this.toggleMenu = this.toggleMenu.bind(this);
}
handleMouseDown(e) {
this.toggleMenu();
e.stopPropagation();
}
toggleMenu() {
this.setState({
visible: !this.state.visible
});
}
componentDidMount() {
axios.get(API)
.then(response => {
const mails = response.data;
this.setState({ mails });
})
}
truncate = (text, chars = 140) =>
text.length < chars ? text : (text.slice(0, chars) + '...')
render() {
let mails = this.state.mails;
console.log(mails);
mails = mails.map(mail => {
return (
<div key={mail.id}>
<div className='mail'>
{
!mails.displayed
? <i className="notDisplayed fas fa-circle"></i>
: <i className="displayed far fa-circle"></i>
}
<HashRouter>
<NavLink
to={`/openemail/${mail.id}`}
style={navLinkStyle}
>
<ul className='ulMailWrap'>
<div className='mailHeader'>
<li>{mail.sender}</li>
<li>{mail.created}</li>
</div>
<li>{mail.subject}</li>
<li>{this.truncate(mail.message)}</li>
</ul>
</NavLink>
</HashRouter>
<ConfigButton onClick={this.handleMouseDown} />
<Menu handleMouseDown={this.handleMouseDown}
menuVisibility={this.state.visible}
/>
</div>
</div>
)
});
return (
<div>
{ mails }
</div>
);
}
}
export default Emails;
You can pass a function that will send a different parameter to the handler, depending on value of each element in the array.
Do something like this:
...
<div key={mail.id} onClick={() => this.handleOpenMenu(mail.id)}>
...
Then at the handler:
handleOpenMenu = id => {
// do different stuffs on the id you get here
this.setState({ visibleMenuId: id });
}
And then change the props you are passing to your menu component:
<Menu menuVisibility={this.state.visibleMenuId === mail.id} />
React Newbee here
Firstly , I have a component DetailMovieCard.jsx where I am inserting background image in componentDidMount () It works fine but I was wondering is there any other efficient way instead of using
document.body.style.backgroundImage
DetailMovieCard.jsx
import React, { Component } from "react";
import { Row, Col, Glyphicon, Button } from "react-bootstrap";
import styled from "styled-components";
import { URL_IMAGE, URL_BACKGROUND } from "../const";
const Wrapper = styled.div`
max-width: 60%;
overflow: hidden; `;
const Image = styled.img`
float: left;
width: 40%;
`;
class DetailMovieCard extends Component {
componentDidUpdate() {
document.body.style.backgroundImage =
`url(${URL_BACKGROUND}${this.props.movie.backdrop_path})`;}
render() {
const {
poster_path, original_title, backdrop_path, tagline, overview,
} = this.props.movie;
return (
<Wrapper>
<Image alt="" src={`${URL_IMAGE}${poster_path}`} />
<div className="movie-details">
<h3>Title of the movie is {original_title} </h3>
<div>
<div className="movie-tagline"> {tagline} </div>
<div className="movie-overview">{overview} </div>
</div>
</div>
</Wrapper>
);
}
}
export default DetailMovieCard;
Secondly , I have a component called MovieDetails.jsx currently I am giving data fetched by componentDidMount() directly to <DetailMovieCard movie={this.state.movieData} > again it works fine but is there any better way of doing it ?
import React, { Component } from "react";
import axios from "axios";
import { URL_DETAIL, API_KEY } from "../const";
import DetailMovieCard from './DetailMovieCard';
import Header from './Header';
class MovieDetails extends Component {
constructor(props) {
super(props);
this.state = {
movieData: { movies: " " }
};
}
componentDidMount() {
const { id } = this.props.match.params;
axios.get(`${URL_DETAIL}${id}${API_KEY}&language=en-US&page=1`)
.then(response => {
this.setState({ movieData: response.data });
});}
render() {
return (
<div className= "movie-container">
<Header/>
<DetailMovieCard movie={this.state.movieData} />
</div>
);
}
}
export default MovieDetails;
You can always use callbacks:
Set the backgroundImage in your main App component there is no reason to use <body>
Keep the current backgroundImage url in main App component state or in redux store
Then you can set the backgroundImage url using regular javascript callbacks