This is the motive
The background image is not a single file but collection of many thumbnail captured inside a div tag
Code:
import React, { Component } from 'react';
class Background extends Component{
constructor(props){
super(props)
this.state={pictures:[]}
}
componentDidMount(){
fetch('https://randomuser.me/api?results=300')
.then(results=>{
return results.json();
}).then(data=>{
let pictures=data.results.map((pic)=>{
return(
<span key={pic.login.uuid}>
<img src={pic.picture.medium} alt=''/>
</span>
)
})
this.setState({pictures:pictures})
})
}
render(){
return(
<div className="Container1">
{this.state.pictures}
</div>
)
}
}
export default Background;
How should my css should be for Container1 class and for my app class which has the main content?
The following link would be helpful :
https://www.webucator.com/how-to/how-use-multiple-background-images-with-css.cfm
Another solution would be to create a css flex container and dynamically create a element for each image of your pictures array.
Check this link for more info on flex layout.
Related
i want to put an image as background image where multiple components like video component login component bottom component floats on top of it. what would be the exact code pattern for this this on react as i am new to it. All the video component and other component goes here. The code is like this below:
import React from 'react'
import Video from './Video.js'
import './Home.css'
import logo from './images/background.png'
function Home() {
return (
<div className="home">
<img src={ logo } />
</div>
)
}
export default Home
You should make a parent component and use that parent component to wrap the child component so that the parent component appears as an image overlay above child comp.
import React from 'react'
import Video from './Video.js'
import './Home.css'
import logo from './images/background.png'
function Parent() {
return (
<div className="home" style={{background: url(logo)}}>
{...props.children}
</div>
)
}
export default Home
now use this parent component as -
<Parent>
<Video src={videourl} >
</Parent>
now learning react and need to do some similar buttons with different images.
my component:
export default class Button extends Component {
render() {
return (
<button className="header_btn"></button>
)
}
}
How to set image to this button using props? Images saved in local storage
Hi please check this example: Here I pass text and imageUrl as props.
import React from "react";
export default class Button extends React.Component {
render() {
return (
<button className="header_btn">
<img height="15px" width="15px" src={this.props.imageUrl} />
{this.props.text}
</button>
)
}
}
You should use Button Component in your App.js or any other component like below:
<Button text="Click" imageUrl="https://www.tutorialspoint.com/latest/inter-process-communication.png" />
You can apply image on button using background: url('imageAddressInString');
<button style={background: `url(${this.props.imageUrl})`}></button>
and pass imageUrl to Button component in props.
const firstImage = './example.jpg';
<Button imageUrl={firstImage} />
I'm trying to add a custom HTML attribute on a React component:
const Parent = () => (
<div className="parent">
<Child data-custom="foo" />
</div>
);
Where Child is another React component, but the attribute gets stripped on the output HTML. I'm aware that I could simply add the attribute on the Child root element, like so:
const Child = () => <div className="child" data-custom="foo" />
Or read the attribute in the Child component via props, but that's not what i'm looking since that would couple the attribute with the component, and I'm looking for a more contextual approach (the attribute would be used for test automation purposes).
Is there a clean way to do that in React?
I'm also considering writing a Babel plugin to add the attribute or prevent the stripping, but that would be another question.
Thanks!
React element doesn't necessarily correspond to DOM element that could have HTML attributes. React component can be rendered to multiple DOM elements or no elements at all.
If Child should be able to provide additional props or attributes to child DOM element, it should pass them explicitly:
const Child = props => <div className="child" {...props} />
This way data-custom="foo" will be passed to <div>.
For this, you can try this in your react script.
const MyCompo = () => {
return (
<div>
<p>HTML Code</p>
</div>
);
}
export default About;
Otherwise you can create class and then define your components and then export them.
import React from 'react';
import '../assets/css/style.css';
import '../assets/css/pure-min.css';
import '../assets/css/custom.css';
import 'font-awesome/css/font-awesome.min.css';
import $ from 'jquery';
class FirstScreen extends React.Component {
constructor(props) {
super(props);
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
}
render() {
return <div>HTML Code</div>;
}
}
export default FirstScreen;
You could use the below syntax
const Parent = () => (
<div className="parent">
<Child data-custom="foo"/>
</div>
);
const Child = ({...props}) => (<div className="child" {...props} />)
I want to have same appearance for all notification messages. I have a parent component for which two child components render different messages...one normal message and other component displays message based on context.
Below is the code,
class Parent extends React.Component {
constructor(props) {
super(props);
this.element = document.createElement('div');
this.element.className= 'wrapper';
}
componentDidMount() {
root.appendChild(this.element);
}}
class Child1 extends React.Component {
render = () => {
return (
<div onClick={this.close} className="notification_info">
soemthing
</div>);}}
class Child2 extends React.Component {
render = () => {
<div>
<h2>Debug</h2>
</div>}
let content;
if (content) {
return (
<div className="container">
<div className="main">
<div className="notification">
<div className="notification_info">{content}
</div>
</div>
</div>
<div className="close"><SvgClose width="28" /></div>
</div>);}}}
I want to create three divs with className container, main, notification for both child1 and child2 components as well. I want to add the same divs like in child2 to child1 as well before div with classname notification_info.
<div className="container">
<div className="main">
<div className="notification">
What i tried doing is creating three divs with classname container, main, notification for child1 component as well. This would create container for normal and contextual messages as well. But then i am looking for some other way to do it. refactor it or clean way of doing it.
Could someone help me with this. Thanks.
What about making the notification a standalone component? In this way you wouldn't have that much div nesting on a single component.
Able to fetch the data from API.
But the problem is when I try to map the carousel-item inside class carousel.
The properties are not being inherited.
When I inspect, I see there are carousel-item inside carousel, but they are not having the default properties.
This is my Carousel Class
class Carousel extends Component {
constructor(props){
super(props);
this.state = { albums: [] };
}
componentWillMount() {
axios.get('http://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({albums: response.data}));
}
renderAlbums(){
return this.state.albums.map(album =>
<Card song={album.title} singer={album.artist} src={album.thumbnail_image}/>
);
}
render() {
return (
<div className="carousel center">
{this.renderAlbums()}
</div>
);
}
}
export default Carousel;
This is my Card Component
import React, { Component } from 'react';
import '../../App.css';
class Card extends Component {
render() {
return (
<div className="carousel-item center">
<div className="card z-depth-4">
<div>
<img src={this.props.src} className="responsive-img"/>
</div>
<p>{this.props.song}</p>
<div className="singer">{this.props.singer}</div>
</div>
</div>
);
}
}
export default Card;
Please suggest if there is any other way, to import it.
Already have initialised carousel and it's working if I try the Materialize Example
Try performing your API call in componentDidMount instead of componentWillMount.
The latter is called before the initial render, and thus, if your API call returns before the component finishes mounting, the setState statement will not cause a re-render.
With the former, setting the state will always cause a re-render to occur. React documentation recommends initiating data requests from remote endpoints from componentDidMount. See here.