menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team
Show previous messages

May 11, 2021 at 7:40am
Hi Guys this is my code, in this i am facing one issue after clicking on AudioCard the audio is not playing in first attempt after clicking second time this is working. Can anyone help me with this?
send me code

May 11, 2021 at 3:29pm
I think you should handle playingSong state by useEffect hooks. like this:
const playSong = () => setPlayingSong(require(`.../sound/${title}.mp3`));
useEffect(() => {
if(playingSong) {
const audio = new Audio(playingSong);
dispatch({
type: "PLAY_SONG",
currentPlayingSong: audio
});
audio.play();
}
}, [playingSong]);
Edited

May 13, 2021 at 12:50pm
Afternoon lovely folk - i'm making my signup page a protected route, (so only registered users can make accounts for new users). I'm having trouble with persisting the state of the current user, when a new user is registered it replaces the details of the current logged in user.
signup = (userInfo) => {
return todoAxios.post("/auth/signup", userInfo).then((response) => {
const { user, token } = response.data;
localStorage.setItem("token", token);
localStorage.setItem("user", JSON.stringify(user));
if (this.state.user && Object.keys(this.state.user).length === 0) {
this.setState({
user,
token,
});
}
return response;
});
};
Edited

May 22, 2021 at 12:09pm
how can i deploy a reactjs spring boot , mysql application for free. PS: it's my first time trying to deploy something. thanks.

May 24, 2021 at 7:23pm
You just want to deploy a react app? Try using Vercel.

May 31, 2021 at 1:01pm
Hello Everyone. I have this error everytime I upload big img files. I am using Redux persist. I dont know how to fix it everytime the storage if full. Hope anyone could help me.

June 2, 2021 at 3:35pm
did you try to compress your file before store it ?
how would I know if its compress or not? Thank you for your reply
like-fill
1

June 8, 2021 at 10:47pm
Hi, i'm trying to add an avatar upload field to the contact form - to this: https://github.com/redhulkrko/ContactFox
Can anyone help me determine the basic changes required to ContactState.js, contactReducer.js and ContactForm.js
I understand Content-Type have to be changed to multipart/form-data?
I think then at some point I would need to set const formData = new FormData();
To append the file? Not sure where I would do that in ContactState.js or ContactForm.js?

June 22, 2021 at 10:27am
hey developers, i like to know why create-react-app dose not let us to create and use folders and logics out of SRC folder? has this a reason? what if we want to do that, what should we do or why should not we do??

July 8, 2021 at 11:10am
Does anyone know if it's possible to disable reacts built in html sanitizer?

August 2, 2021 at 2:31am
hi all, good day, I am new to react and need some help from community to see if there is any online resource to solve my problem. I have array of objects it has id, title, description.. I want to show the data as card and when I click on next and previous button, I want my data to change .. can please anyone help me
anyone

August 2, 2021 at 10:38am
my handler has got some bug i think it does not work smooth
so far i did this much export const UserCardDetails = ({ data }: Props): JSX.Element => { const [current, setCurrent] = useState(0); console.log(current1 ${current});
const onNextClick = (idx: number) => { setCurrent(current === idx ? 0 : current + 1); console.log(setCurrent ${current}); }; const onPrevClick = (idx: number) => { setCurrent(current === idx ? 0 : current - 1); console.log(setCurrent ${current}); };
const res = data.map((slide, idx) => { return ( <Card key={slide.id}> {idx === current && ( <Card.Body> <Row> <Col style={{ paddingBottom: '20px' }}> <FaArrowAltCircleLeft onClick={() => onPrevClick(idx)} style={{ float: 'left' }} /> <FaArrowAltCircleRight style={{ float: 'right' }} onClick={() => onNextClick(idx)} /> </Col> </Row> <Row> <Col> <h5>{slide.title}</h5> </Col> </Row> <Row> <Col> <img src={slide.url} alt={slide.title} /> </Col> <Col> <p>{slide.description}</p> </Col> </Row> </Card.Body> )} </Card> ); }); return <div>{res}</div>; };

August 15, 2021 at 8:28pm
@ call me

August 19, 2021 at 6:11pm
How does react works when creating a function but was never called, but the import to a file works on the return
Show more messages