My background img is not working in react app - reactjs

my background image is not working can any buddy check it?
import React from 'react'
import "./Home.css"
// backgroundimage
import bgImg from "./../assests/img/bg-sec1.jpg"
function Home() {
return (
<div>
<div styles={{ backgroundImage:`url(${bgImg})` }}>
<h1>This is red car</h1>
</div>
</div>
)
}

function Home() {
return (
<div>
<div style={{ backgroundImage:url(${bgImg}) }}>
<h1>This is a red car</h1>
</div>
</div>
)
}
At least you must fix typo styles->style.

Related

I was creating a carousel which displays trending cryptoCurrencys using AliceCarousel but the output is not correct

picture of the output https://i.stack.imgur.com/5kxvb.png
code of the carousel
import React from 'react'
import AliceCarousel from 'react-alice-carousel';
import { Link } from 'react-router-dom';
import UseAxios from '../hooks/UseAxios'
import "./Trending.css";
const Trending = () => {
const { response } = UseAxios("search/trending");
return (
{response && response.coins.map(coin => {
return <div className='flex slide' key={coin.item.coin_id}>
<Link to={`/coin/${coin.item.id}`}>
<div>
<AliceCarousel
mouseTracking
infinite
autoPlayInterval={1000}
animationDuration={1500}
disableButtonsControls
autoPlay
>
<img src={coin.item.large} className="mt-0 relative top-30 img" />
<p key={coin.item.coin_id} className="name"> {coin.item.name} </p>
</AliceCarousel>
</div>
</Link>
</div>
})}
</div>
)
}
export default Trending;
note:- library being used is AliceCarousel.
can someone please help me fix the carousel.

Why Can't I style this react component

I'm having a problem styling this component. I have added some styles but they are not reflecting. What might be the problem?
import React,{useContext} from 'react'
import "./display.css"
import { AppContext } from '../App'
const Display = () => {
const styles={
backgroundColor:"white"
}
const{type, stateWord,definition,synonyms}=useContext(AppContext)
return (
<div styles={styles} className='container'>
<section styles={styles}>
{stateWord && <div style={{color:"white"}}><h4> Word Type: {type}</h4>
<h4>Definition : {definition}</h4>
<h4>Synonyms:</h4>
{synonyms.map((syn)=>{
return<div><h4>{syn}</h4></div>
})}
</div>
}
</section>
</div>
)
}
export default Display
You have written styles instead of style in your divs. Should be style={styles}.
import React,{useContext} from 'react'
import "./display.css"
import { AppContext } from '../App'
const Display = () => {
const styles={
backgroundColor:"white"
}
const{type, stateWord,definition,synonyms}=useContext(AppContext)
return (
<div style={styles} className='container'>
<section style={styles}>
{stateWord && <div style={{color:"white"}}>
<h4> Word Type: {type}</h4>
<h4>Definition : {definition}</h4>
<h4>Synonyms:</h4>
{synonyms.map((syn)=>{
return<div><h4>{syn}</h4></div>
})}
</div>
}
</section>
</div>
)}
export default Display
It's because you misspelled style:
styles={styles}
should be
style={styles}

react-custom-scrollbars safari not rendering

I'm having an issue with Scrollbars just in Safari.
App.js
import Main from './components/Main';
function App() {
return (
<>
<div className="app">
<div className="app-main-container">
<div style={{position: 'absolute', inset: '0px 0px 0px 0px'}}>
<div className="app-container">
<div className="rct-app-content">
<div className="app-header">
</div>
<div className="rct-page">
<Main />
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default App;
In my Main file I have the Scrollbar
import React, { useState, useEffect } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
const Main = () => {
const getScrollBarStyle = () => {
return {
height: 'calc(100vh - 50px)'
}
}
return (
<>
<Scrollbars
className="rct-scroll"
autoHide
autoHideDuration={100}
style={getScrollBarStyle()}
>
<div className="rct-page-content">
<div className="row">
<h3>TEST</h3>
</div>
</div>
</Scrollbars>
</>
)
}
export default Main;
When I run in Firefox and Chrome, the "TEST" is displayed in the screen, but in Safari it is empty.

how to change background color when I click the button using react hooks

I am working on React project, In that I have App.js component, in that component I have button Now please tell me how to change button background color and button text color by using react hooks
This is App.js
import React, { useState } from 'react';
import './App.css';
function App() {
return (
<div className="App">
<button className='btn btn-primary'>Click here</button>
</div>
);
}
export default App;
try this
function App() {
const [color,setColor]=useState('red');
const [textColor,setTextColor]=useState('white');
return (
<div className="App">
<button style={{background:color,color:textColor}} className='btn btn-primary' onClick={()=>{setColor("black");setTextColor('red')}}>Click here</button>
</div>
);
}
export default App;
OR
check link : https://stackblitz.com/edit/react-x7mevv
App.js
function App() {
const [toggle,setToggle] = React.useState(false);
const toggleIt =()=>{
setToggle(!toggle)
}
return (
<div className="App">
<button onClick={toggleIt}>{toggle?'Hide':'Show'}</button>
<div className={toggle&&'body-color'}>
Body
</div>
</div>
);
}
class in App.css
.body-color{
background: coral;
height:100vh;
}

How to change styles for components while we reusing in react?

I am working on react project, In that I have a parent component that is App.js. for that that App.js, Child.js is child component. In that Child.js I put one icon and apply styles.
Now I want to reuse that Child.js component with a different background color, different icon, different border color.
How to achieve this is in react
This is App.js
import React from 'react';
import './App.css';
import Child from './Child/Child'
function App() {
return (
<div className="App">
<Child></Child>
<Child></Child>
</div>
);
}
export default App;
This is Child.js
import React from 'react';
import './Child.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
function Child() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className='coffee' icon={faCoffee} />
</div>
</div>
</div>
</div>
)
}
export default Child
This is Child.css
.exp{
width:80px;
height:80px;
background-color:red;
border-radius:100%;
line-height:80px;
text-align:center;
vertical-align:middle;
display:inline-block;
border: solid 3px blue;
}
.coffee {
color: green;
}
You can create multiple classes in your css file and then pass in the prop of the class name and icon you want to use in the component.
<Child iconClass="coffee" icon={faCoffee}/>
function Child(props) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className={props.iconClass} icon={props.icon} />
</div>
</div>
</div>
</div>
)
}
You can add an icon props to render a JSX element in your Child component.
function Child({ icon }) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
{icon}
</div>
</div>
</div>
</div>
)
}
You can then write your Children component like this in your Parent component.
<Child icon={(<FontAwesomeIcon className='coffee' icon={faCoffee} />)} />
Make the child to accept props and pass props when you render the component.
function Child({ icon, className}) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className={className} icon={icon} />
</div>
</div>
</div>
</div>
)
}
export default Child
Then use it like
<Child icon="faCoffee" className="style" />
<Child icon="faBars" className="style" />

Resources