I have an div in which I have to display a photo using backgroundImage.
I have an object in which an as URL path for the image which I later on return from the obect.
I made the following code :
import React from 'react'
import './user.css';
const User = ({name,img,position,names}) => {
return ( <div className = 'card'>
<div id='image' style={{
backgroundImage: `url({${img}})`
}}></div>
<p className = 'card_name' id = 'based'>{name}</p>
<p className = 'card_position'>{position}</p>
<p>{names + ' '}</p>
</div>
);
}
export default User;
When I try to run the page I dont have any errors but my image does not appear on the page. What my seem to be the problem?
You have extra parentheses on the value you are passing to the URL, Try this:
You also need to add a height and width to the div
style={{
height: "200px",
width: "100%",
backgroundImage: `url(${img})`,
}}
Related
New to coding, trying to get a modal to work. It is not opening the way I expected it to.
The component is currently loaded within the footer div of my site. And when the button is toggled it simply hides or shows a div within the footer. I want it to appear in the centre of the webpage as a modal.
import React, {useState} from 'react';
import './policy.css'
export default function Policy() {
const [modal, setModal] = useState(false);
const toggleModal = () => {
setModal(!modal);
};
if(modal) {
document.body.classList.add('active-modal')
} else {
document.body.classList.remove('active-modal')
}
return (
<>
<div>
<button onClick={toggleModal} className='btn-modal'>
<p>Privacy Policy</p>
</button>
</div>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<h2>Privacy Policy</h2>
<p>This is the privacy policy</p>
<button className='close-modal' onClick={toggleModal}>Close</button>
</div>
</div>
)}
</>
);
}
The simplest way to achieve a modal effect is to use some CSS.
You could try a very crude style like (from MUI Modal docs):
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "lightgrey",
border: "2px solid #000",
boxShadow: 24,
padding: 4,
};
Then apply it to your modal:
<div className="modal" style={style}>
Here is my bottom container now I want that whenever the user clicks on an input field this container goes above the keyboard. I have the user scrollIntoView to do this but it shifted the entire page upwards. I want that only the container goes above the keyboard. I want to do this on website.
import React, {useRef} from 'react'
function App() {
const ref = useRef(false);
return (
<div style = {{position: 'fixed', left: '0px', bottom:'0px', backgroundColor: 'red', overflow:'auto', height:'50%'}} >
<div>
<div> Enter your name</div>
<input
type ='text'
onChange ={()=>
ref?.current?.scrollIntoView()
}
/>
<div style ={{position: 'fixed', left: '0px', bottom:'0px' , backgroundColor: 'green', height:'5%'}} ref={ref} >
our Bottom container
</div>
</div>
</div>
);
}
export default App;
This is the test I made in a sandbox.
If you run the code and click the 2 buttons like this: first, back, first, back ... a few times you will see at the console that the name attribute of the target event becomes null even if it was not null the first time I pressed that button.
I also attached an image with some comments in the lower right corner to clarify the behaviour.
This is the code:
handleSearchChange(event) {
const target = event.target;
const name = target.getAttribute("name");
console.log("Test name " + name + "\n");
}
render() {
return (
<div>
<div style={{ height: "30px", width: "30px" }}>
<FirstSVG name="first_page" onClick={this.handleSearchChange} />
</div>
<div style={{ height: "30px", width: "30px" }}>
<BackSVG name="back_page" onClick={this.handleSearchChange} />
</div>
</div>
);
}
The <svg> element will only be the target if it's the innermost item clicked on. If you click on the <path> part of the SVG, for example, that'll be the target instead.
While you could fix it by using event.currentTarget instead - which will reference the element the listener was attached to instead of the element the event was dispatched to - since this is React, a much better approach would be not to pass information through the DOM at all, and to instead convey it through JavaScript alone.
For example, you could have something like:
makeHandler(name) {
return () => {
console.log(name);
};
}
render() {
return (
<div>
<div style={{ height: "30px", width: "30px" }}>
<FirstSVG onClick={makeHandler("first_page")} />
</div>
<div style={{ height: "30px", width: "30px" }}>
<BackSVG onClick={makeHandler("back_page")} />
</div>
</div>
);
}
The target property refers to the dom element on which the event originated
so you have to use currentTarget just like this:
handleSearchChange(event) {
const target = event.currentTarget;
const name = target.getAttribute("name");
console.log("Test name " + name + "\n");
}
if you would like to know more about difference between target and currentTarget see this
here
or here
I have a component that I want to display inside the div tag as a background image in the file path stored in the imageUrl variable.
But the problem is that it can not display the image from this file path.
While there is an image with this name on drive D:\.
I do not know how I can solve this problem, please help us
Thanks
function App() {
const imageUrl = "D:/image.jpg"
const style = {
height: "500px",
width: "500px",
background: `url(${imageUrl}) no-repeat`,
backgroundSize: "500px 500px",
border: "solid red",
borderRadius: "5px",
};
return (
<div>
<div style={style}></div>
</div>
);
}
export default App;
Here the width is mentioned inline so i want to make a card component where the width can be handled dynamically. what i mean to say is there will be one card component from which i can handle the width property dynmically through jsx suppose for one card the width is 250px and for another card the width might be 100px like this
<div className="white-box v-align ht-100" style={{ width: '250px', marginRight: '10px' }}>
<div className="flex-one"></div>
<div className="wd-80">
<div className="fs-xl fw-bold" style={{ color: '#142654' }}>{pct}%</div>
<div className="small-text">{text}</div>
</div>
</div>
A solution to this problem might be using props:
// SomeComponent.js class
class SomeComponent {
// Uncomment if you need to set a state
//constructor(props) {
// super(props);
//
// this.state = {};
//}
render() {
let width = Math.min(Math.max(this.props.width, SOME_MAX_WIDTH), SOME_MIN_WIDTH); // clamp (optional)
return ( // replace with your component
<div style={{width: width, backgroundColor: "#23a4f6"}}>
Width set from parent (and clamped)
</div>
);
}
}
SomeComponent.defaultProps = {
width: 200
};
// SomeComponent.js in functional
function SomeComponent({width}) {
let width = Math.min(Math.max(this.props.width, SOME_MAX_WIDTH), SOME_MIN_WIDTH); // clamp (optional)
return ( // replace with your component
<div style={{width: width, backgroundColor: "#23a4f6"}}>
Width set from parent (and clamped)
</div>
);
}
SomeComponent.defaultProps = {
width: 200
};
// main.js
ReactDOM.render(<SomeComponent />, document.querySelector(".myelement"));
You can take width variable like let width = '100px' and then apply this variable to your code like this. here width you can pass as a prop which could be any value
let width = '100px';
<div className="white-box v-align ht-100" style={{ width: width, marginRight: '10px' }}>
<div className="flex-one"></div>
<div className="wd-80">
<div className="fs-xl fw-bold" style={{ color: '#142654' }}>{pct}%</div>
<div className="small-text">{text}</div>
</div>
</div>