Hello im trying to make an image changer. at first load i should get displayed the first image in the state. if click on the button the image should be changed to second and so on. the problem right now is get displayed both images with buttons
here is my bin : enter link description here
Because you display the 2 image in your renderer.
Heres an idea how to do it (with no animation, I dont know the CSSTransitionGroup component). Just replace your main.js code withthe following
import React from 'react'
import {render} from 'react-dom'
import { CSSTransitionGroup } from 'react-transition-group'
class FadeImage extends React.Component {
constructor(props) {
super(props);
this.state = {
images: [
'http://via.placeholder.com/350x150',
'http://via.placeholder.com/350x151'
],
currentImage: 0
};
}
fadeImage(e) {
e.preventDefault();
this.setState({currentImage: (this.state.currentImage + 1) % this.state.images.length})
}
render() {
return (
<div className="image">
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
<section>
<button className="button" onClick={this.fadeImage.bind(this)}>Click!</button>
<img src={this.state.images[this.state.currentImage]}/></section>
</CSSTransitionGroup>
</div>
);
}
}
render(<FadeImage />, document.querySelector('#app'))
http://bl.ocks.org/piotrf/1b7b14b0c2bfbfe1f1ef this is almost exactly what you want. You can just get rid of the parts you dont need and change the buttons to the images you want
Related
First React project here, so probably a very elementary question, but I'd appreciate any help as I'm not really sure how to phrase my question to search. I have this component:
import React, { Component } from 'react';
import SmallOgLogo from '../../../static/images/OG_logo.jpg';
export default class HeaderNavbar extends Component {
constructor(props) {
super(props);
this.state = {
showImage: true
}
}
render () {
return (
<div>
<div className='header-navbar'>
<div>
<img className='SmallOgLogo' src={SmallOgLogo}/>
</div>
)}
<h1>Title</h1>
</div>
</div>
);
}
}
This is a header for a project I'm working on. It is on every page in the React project. However, on the "title page" (first page users see with the option to "register" or "login"), I don't want it to display SmallOgLogo. On every other page, it will (hence the default setting of true. How can I make it so when I embed this component in another component, I can do something like ? Can anyone clarify? Thank you!
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Changecolor extends Component{
changeme=()=>{<p className='redme'>You Got Me Now Im Red as Tomato Thank you</p>;}
render(){
return(
<div className='testclass'>
<h1>Click me to change my Color</h1>
<p>Hi Please change my color to red Click below button</p>
<button onClick={this.changeme}>Click Me to change Color</button>
</div>
);
}
}
export default Changecolor;
How about this.
constructor(props){
super(props)
this.state = {
clicked:false
}
}
changeme = () =>{
this.setState({clicked:true})
}
const clickedText = "You Got Me Now Im Red as Tomato Thank you",
const clickedClassName = "redme"
render(){
return(
<div className='testclass'>
<h1>Click me to change my Color</h1>
{clicked ? <p className={clickedClassName}>{clickedText}</p> : <p>Hi Please change my color to red Click below button</p>}
<button onClick={this.changeme}>Click Me to change Color</button>
</div>
);
}
If you want to return the JSX inside changeme click handler, you should write code like this:
changeme=()=> <p className='redme'>You Got Me Now Im Red as Tomato Thank you</p> (without curly braces)
For changing color of anything when clicking a button, the idea here is storing a flag in state and adding style base on the value of that flag.
For example, I want to change text of this <p> tag to red when click on the button.
<p>Hi Please change my color to red Click below button</p>
The code should look like this:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Changecolor extends Component{
state = { coloring: false };
changeme=()=>{
this.setState({coloring: true})
}
render(){
return(
<div className='testclass'>
<h1>Click me to change my Color</h1>
<p style={this.state.coloring && { color: 'red'}}>Hi Please change my color to red Click below button</p>
<button onClick={this.changeme}>Click Me to change Color</button>
</div>
);
}
}
export default Changecolor;
Quite new at this and have a question with something that I feel like should be an easy answer.
I essentially have a page that has 5 titles. When I click on a title, it will render that component. I have that, but I don't know how to then make the 5 titles go away? The component that is rendered just shows up below the titles and I want them to switch entirely. Have done a lot of googling and can't seem to get it right.
XYZ.js
import '../App.css';
import Button from 'react-bootstrap/Button'
import { BrowserRouter, Route, Router, Link } from "react-router-dom";
import Chat from './chat.js';
export class XYZ extends React.Component {
constructor(props) {
super(props);
this.state = {
showChat: false,
};
this._onChatClick = this._onChatClick.bind(this);
}
_onChatClick() {
this.setState({
showChat: !this.state.showChat,
});
}
render() {
return (
<div className="yyy">
<div className="xxx">
<div className="chatBody">
<Button className="chatTitle" onClick={this._onChatClick}>
Chat xxz
</Button>
{this.state.showChat ?
<Chat /> : null
}
</div>
<div>
....brevity
</div>
</div>
</div>
);
}
}
export default XYZ;
Thank you for any help!! Can supply additional files if necessary
Can' comment but I guess that you want <Button className="chatTitle"> to disappear when you click on it.
You need to either put it in the place of the null in your ternary operator or put another conditional rendering on top of the existing one, like:
{!this.state.showChat && <Button className="chatTitle">Chat xxz</Button>}
I Have a react-loading-skeleton in my component, i have a static image in my page that i loaded using img tag, i want to show a skeleton component until the image loads.
I tried react.lazy and suspense but it only shows until the component load not works until image loads completely.
import React from 'react';
export default class SlideItems extends React.Component {
render() {
return (
<div>
<img src={require("./someImg.jpg")}/>
</div>
);
}
}
Start by adding constructor and state to class:
constructor(props) {
super(props);
this.state = {
image: '',
}
}
You can then add onLoad property to image tag like this:
<img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>
And create function that handles image loading:
handleImageLoaded() {
this.setState({ image: 'loaded' });
}
Then in render you can do something like this:
render() {
return (
<div>
{!this.state.image &&
<SkeletonComponent/>
}
<img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>
</div>
);
}
I have following code where i am trying to load images from Array, if i try to load a single image it works fine, but if i try to load multiple images it dosent show any image, tho my div test is in the dom.
import React, {Component} from 'react';
class Slider extends Component {
render() {
const myItems = [{source_image: '1.jpg'}, {source_image: '2.jpg'}, {source_image: '3.jpg'}];
return (
<div id="test">
{myItems.map(function (a) {
<img src={"images/"+a.source_image}/>
}
)}
</div>
);
}
}
export default Slider;
You forget return in map:
{myItems.map(function (a) {
return <img src={"images/"+a.source_image}/> // here
})
}
{myItems.map(a => <img src={"images/"+a.source_image}/>)} //this is more clear, I think