I'm trying to make the background change whenever the user is uploading an image, the background is set on default however, I found that I have to use <input /> but then I got stuck
this my work so far !
const [backgroundShown, setBackgroundShown] = useState(false);
const changeBackground = () => {
setBackgroundShown(!backgroundShown);
};
{file && (
<img
className="writeImg"
src={URL.createObjectURL(file)}
/>
)
}
<form className="writeForm" onSubmit={handlerSubmit}>
<div className="writeFormGroup">
<label htmlFor="fileInput">
<img
type={backgroundShown ? "img" : "file"}
className="writeIcon"
src="/Images/Upload-Vector.png"
></img>
</label>
<div>
<input
onClick={changeBackground}
type={backgroundShown ? "file" : "img"}
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={e => setFile(e.target.files[0])}>
</input>
</div>
It sounds like you want to remove the button when the user "uploads".
If so, just conditionally render it when the user hasn't uploaded.
{file && (
<img
className="writeImg"
src={URL.createObjectURL(file)}
/>
)
}
{!file &&
<form className="writeForm" onSubmit={handlerSubmit}>
<div className="writeFormGroup">
<label htmlFor="fileInput">
<img
type={backgroundShown ? "img" : "file"}
className="writeIcon"
src="/Images/Upload-Vector.png"
></img>
</label>
<div>
<input
onClick={changeBackground}
type={backgroundShown ? "file" : "img"}
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={e => setFile(e.target.files[0])}>
</input>
</div>
}
Related
I am making a image slider in react.js. made images div . overflow scroll. I want the current scrollbar value of the images div, like window.scrollY, for checking radio button when the scroll value is coming particular position.
function Events() {
const images = [
"https://picsum.photos/id/0/5000/3333",
"https://picsum.photos/id/1/5000/3333",
"https://picsum.photos/id/2/5000/3333",
"https://picsum.photos/id/3/5000/3333",
"https://picsum.photos/id/4/5000/3333",
"https://picsum.photos/id/5/5000/3333"
]
const [scrolled,setScrolled] = useState(1)
const events2 = document.querySelector("#images")
const slide = () =>{
if(events2.scrollLeft > 100){
console.log("hi")
}
}
return (
<div className='events' id='events' >
<div className='images' id="images" onScroll={slide}>
{images.map((obj) => {
return (
<div className="image">
<img src={obj} alt="NETWORK ERROR" draggable="false" />
</div>
)
})}
</div>
<div className="radio">
<input type="radio" name='img' defaultChecked />
<input type="radio" name='img' />
<input type="radio" name='img' />
<input type="radio" name='img' />
<input type="radio" name='img' />
</div>
</div>
)
I am used console.log("hi") for testing. but it is not working. And I used scrollLeft for getting vertical value of the images div. not working why?
hope any of you could help me out in here...
On the code below I have 2 separete elements which I want to show one at the time.
first element is an iframe
second is a Div
the ideia is if the user click on the {title} then the frame disaper and the div appear.
I can manage to make the frame disapper and appear by clicking on the title, but the same does not happen with the div.
the code is basically the same, so I don't really get why is the div not having the same behavior then the frame.
Also I double checked and both css classes get changed as expected, just that the css class seems not to work on the Div.
Tks in advance.
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;
className={`${content ? 'content_site' : 'content_frame'}`}
and
className={`${content ? 'content_frame' : 'content_site'}`}
are contrandicting each other because both are expecting content to be true change one to be !content
change the second one as you can see in your method setContent(!content)}
like this:
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${!content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;
I've fetched anwsers from a survey I made and i want to display the result.
It is a notation (1 to 5) and I want to show the result like the screeshot.
The numbers are in a square and the number who's the answer is in an other color.
But I"m stuck.
How do I compare the note I fetched with the value on my input ?
I"m not doing an onChange so I can't use event.target.value.
I'd like to something like :
className={`square ${element.answer===value && "red"}`}
my code :
import React, { useEffect, useState } from "react";
import "./index.css";
import axios from "axios";
/* import icons */
import FileWhite from "../../assets/img/file-text-white.svg";
import StarWhite from "../../assets/img/star-white.svg";
import Minus from "../../assets/img/minus.svg";
const Responses = ({ id }) => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (id) {
const fetchData = async () => {
try {
const response = await axios.get(
`http://localhost:3001/responses/${id}`
);
console.log(response.data);
setData(response.data);
setIsLoading(false);
} catch (error) {
console.log(error.message);
}
};
fetchData();
}
}, [id]);
return isLoading ? (
<div>Chargement en cours...</div>
) : (
<div id="responses">
{data.map((responses) => {
return responses.answers.map((element) => {
return (
<article>
<div className="question">
<div
className={`type ${
element.type === "texte" ? "orange" : "red"
}`}
>
<span>{element.type === "texte" ? "1" : "2"}</span>
<img src={Minus} alt="" />
<img
src={element.type === "texte" ? FileWhite : StarWhite}
alt=""
/>
</div>
<div>{element.question}</div>
</div>
{element.type === "texte" ? (
<div className="answerText">{element.answer}</div>
) : (
<div className="answerNote">
<div className="square">
<input type="radio" id="note1" name="note" value="1" />
<label htmlFor="note1">1</label>
</div>
<div className="square">
<input type="radio" id="note2" name="note" value="2" />
<label htmlFor="note2">2</label>
</div>
<div className="square">
<input type="radio" id="note3" name="note" value="3" />
<label htmlFor="note3">3</label>
</div>
<div className="square">
<input type="radio" id="note4" name="note" value="4" />
<label htmlFor="note4">4</label>
</div>
<div className="square">
<input type="radio" id="note5" name="note" value="5" />
<label htmlFor="note5">5</label>
</div>
</div>
)}
</article>
);
});
})}
</div>
);
};
export default Responses;
How do I get the value of the input to get this result ? (see screenshot)
it should be like this
className={`square ${element.answer===value ? "red" : "" }`}
Not sure what other info I could supply besides one of the columns that would be helpful. I'm stumped.
[edit] Added full code for this component. This looks fine on desktop but not on my phone or tablet. See the photos. I'm repeating this because I can't save my edits to this question due to having too much code and not enough information so here I am rambling about nothing.
Mobile:
Desktop:
import React, { Component } from 'react';
import API from '../utils/API';
class Attendance extends Component {
state = {
selectedOption: "",
disabled: ""
};
handleOptionChange = (changeEvent) => {
this.setState({
selectedOption: changeEvent.target.value
});
};
handleFormSubmit = (formSubmitEvent) => {
formSubmitEvent.preventDefault();
if (!this.state.selectedOption) {
return;
} else {
this.setState({
disabled: "true"
})
API.updateAttendance(this.props.student._id, { present: this.state.selectedOption });
}
};
render() {
return (
<div className="col d-flex justify-content-end" >
<form onSubmit={this.handleFormSubmit}>
<div className="row mt-3">
<div className="col-sm-3">
<label className="text-danger">
<input
type="checkbox"
value="absent"
checked={this.state.selectedOption === 'absent'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Absent
</label>
</div>
<div className="col-sm-3">
<label className="text-warning">
<input
type="checkbox"
value="excused"
checked={this.state.selectedOption === 'excused'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Excused
</label>
</div>
<div className="col-sm-3">
<label className="text-success">
<input
type="checkbox"
value="present"
checked={this.state.selectedOption === 'present'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Present
</label>
</div>
<div className="col-sm-3">
<div className="form-group">
<button type="submit" className="btn btn-sm btn-dark" onSubmit={this.handleFormSubmit} disabled={this.state.disabled}>
<i className="fas fa-user-check" />
</button>
</div>
</div>
</div>
</form>
</div>
);
}
}
export default Attendance;
LoginComponent.js
render() {
return (
<div className="col-md-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input value={this.state.email} onChange={this.handleChange} type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</form>
</div>
);
}
This is how my LoginComponent, which is just a login box component renders like above. I wanted to center align this.
Login.js
const loginStyles = {
display: 'flex', justifyContent: 'center'
}
class Login extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<LoginComponent style={loginStyles}/>
</div>
);
}
}
So, I simple used flex and justifiyContent to make the box go to center of the page, but it keeps staying on the top-left of the page. How can I handle this issue?
This is because passing style={loginStyles} to your LoginComponent does nothing, if you don't use that prop...
style must be set on an HTML tag. You could try wrapping your whole JSX with another div, as such:
render() {
return (
<div style={this.props.style}>
<div className="col-md-6">
<form>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input value={this.state.email} onChange={this.handleChange} type="email" name="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</form>
</div>
</div>
);
}
That way your LoginComponent will actually use the style prop passed by its parent.
Besides the other answer, you need also set the width of the parent div component for horizontal centering. So in your case you can set parent div width to `width: "100%"'
const loginStyles = {
display: 'flex',
justifyContent: 'center',
width: "100%"
}