26,523 questions
94
votes
4
answers
209k
views
How to display binary data as image in React?
I am receiving a bindata from the Nodejs server and now from that I need to display an image.
How can I achieve this? Is there any method to convert bindata to JPEG or any other format? Or is it ...
- 1,379
54
votes
5
answers
55k
views
Can't build React/Next project - found page without a React Component as default export (context api file)
I'm trying to build my Next.js project but it keeps giving me this error in the terminal:
Error: Build optimization failed: found page without a React Component as default export in
pages/components/...
- 638
22
votes
5
answers
28k
views
Load images based on dynamic path in ReactJs
I'm trying to display images in a shopping cart i'm making but its not showing up. Do i have to import each image? I know my paths are fine because it worked before.I think there might be something ...
- 461
370
votes
40
answers
669k
views
Scroll to the top of the page after render in react.js
I have a problem, which I have no ideas, how to solve.
In my react component I display a long list of data and few links at the bottom.
After clicking on any of this links I fill in the list with new ...
- 6,810
240
votes
12
answers
238k
views
With useEffect, how can I skip applying an effect upon the initial render?
With React's new Effect Hooks, I can tell React to skip applying an effect if certain values haven't changed between re-renders - Example from React's docs:
useEffect(() => {
document.title = `...
- 2,846
227
votes
11
answers
519k
views
Call multiple functions onClick ReactJS
I know in vanilla JavaScript, we can do:
onclick="f1();f2()"
What would be the equivalent for making two function calls onClick in ReactJS?
I know calling one function is like this:
onClick=...
- 3,709
162
votes
39
answers
187k
views
React router changes url but not view
I am having trouble changing the view in react with routing. I only want to show a list of users, and clicking on each user should navigate to a details page. Here is the router:
import React from "...
- 1,826
160
votes
10
answers
238k
views
How to register event with useEffect hooks?
I am following a Udemy course on how to register events with hooks, the instructor gave the below code:
const [userText, setUserText] = useState('');
const handleUserKeyPress = event => {
...
- 13k
140
votes
2
answers
135k
views
What happens when using this.setState multiple times in React component?
I wanted to check what happens when you use this.setState multiple times (2 times for the sake of the discussion).
I thought that the component will be rendered twice but apparently it's rendered ...
- 2,165
133
votes
4
answers
225k
views
You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client"
The simple below component is throwing the following error in Next.js's app directory when I use useState:
× You're importing a component that needs useState. It only works in a Client Component but ...
- 47.5k
97
votes
8
answers
130k
views
error: Do not use Array index in keys
I am using index to generate key in a list. However, es-lint generates an error for the same. React doc also states that using the item index as a key should be used as last resort.
const list = ...
- 1,337
30
votes
2
answers
31k
views
How to use template literals in tailwindcss to change classes dynamically?
I tried to change it with this line of code it but it doesn't work
const [click, setClick] = useState(false);
const closeNav = () => {
setClick(!click);
};
const openNav = () => {
setClick(...
- 389
13
votes
2
answers
10k
views
What does three dots do in ReactJS [duplicate]
const peopleList = this.state.people.map( x => {
return <Person key={x.name} {...x} />
})
What does "{...x} " this code mean?
- 1,063
6
votes
2
answers
21k
views
react router v6 No routes matched location
I'm want to navigate user to a specific url with a param into sees it as a list items with a view item button.
When I click the view button item get the following warnng message
No routes matched ...
- 362
659
votes
20
answers
1.1m
views
React.js inline style best practices [closed]
I'm aware that you can specify styles within React classes, like this:
const MyDiv = React.createClass({
render: function() {
const style = {
color: 'white',
fontSize: 200
};
...
- 9,193
485
votes
8
answers
348k
views
React Router with optional path parameter
I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data):
http://localhost/app/path/to/page <= render the page
http://...
- 9,922
338
votes
8
answers
301k
views
How to update React Context from inside a child component?
I have the language settings in the context as like below
class LanguageProvider extends Component {
static childContextTypes = {
langConfig: PropTypes.object,
};
getChildContext() {
...
- 4,191
230
votes
18
answers
566k
views
How to display svg icons(.svg files) in UI using React Component?
I have seen a lot of libraries for svg on react but none gave me how to import an svg file in the react component. I have seen code which talk about bring the svg code into react rather than using the ...
- 2,645
226
votes
17
answers
506k
views
Update style of a component onScroll in React.js
I have built a component in React which is supposed to update its own style on window scroll to create a parallax effect.
The component render method looks like this:
function() {
let style = {...
- 2,647
151
votes
6
answers
282k
views
Objects are not valid as a React child (found: [object Promise])
I am trying to render a list of posts by mapping through an array. I've done this many times before but for some reason
renderPosts = async () => {
try {
let res = await axios.get('/posts'...
- 1,997
137
votes
10
answers
131k
views
How does shallow compare work in react
In this documentation of React, it is said that
shallowCompare performs a shallow equality check on the current props and nextProps objects as well as the current state and nextState objects.
The ...
- 5,280
123
votes
9
answers
232k
views
Updating and merging state object using React useState() hook
I'm finding these two pieces of the React Hooks docs a little confusing. Which one is the best practice for updating a state object using the state hook?
Imagine a want to make the following state ...
- 31.9k
119
votes
15
answers
274k
views
React - Preventing Form Submission
I've been experimenting with React. In my experiement, I'm using the Reactstrap framework.When I click a button, I've noticed that the HTML form submits. Is there a way to prevent form submission when ...
- 5,877
96
votes
8
answers
227k
views
react-router-dom v6 useNavigate passing value to another component
The version of react-router-dom is v6 and I'm having trouble with passing values to another component using Navigate.
I want to pass selected rows to another page called Report. But, I'm not sure I'm ...
- 965
90
votes
3
answers
85k
views
Reactjs async rendering of components
I want to render my component after my ajax request is done.
Below you can see my code
var CategoriesSetup = React.createClass({
render: function(){
var rows = [];
$.get('http://...
- 6,371
87
votes
2
answers
123k
views
Rendering React components with promises inside the render method
I have a component which gets a collection of items as props and maps them to a collection of components which are rendered as children of a parent component. We use images stored in WebSQL as byte ...
- 10.6k
72
votes
11
answers
70k
views
React Native: require() with Dynamic String?
I have read several posts about issues that people are having with React Native and the require() function when trying to require a dynamic resource such as:
Dynamic (fails):
urlName = "sampleData....
- 6,540
59
votes
5
answers
50k
views
What the difference of this.state and this.setstate in ReactJS?
I want to change the value for the hasSubmit key, like in the First Code section. I know this is not recommended. But the second code is asynchronous and I don't want to use the callback function of ...
- 753
5
votes
1
answer
7k
views
Page layout broken in React Router v6
I was refactoring my React app after updating React Router to v6 and I got rid of the error I was getting in my routes, except now the desired layout is broken.
I need to include a permanent toolbar ...
- 545
2
votes
3
answers
4k
views
Simple Component is not rendering: React js
I am tring to do react using below code but I am not getting html
element in the browser. There is no error in the console.
<!DOCTYPE html>
<html>
<head>
<title&...
- 659
1
vote
2
answers
2k
views
Why did this code fail to send password reset link in firebase?
I am new to firebase and I am trying to handle firebase user authentication in React.js. I did manage to create users with email and passwords. But, now I would like to send the user an Email link to ...
- 575
587
votes
25
answers
634k
views
React - changing an uncontrolled input
I have a simple react component with the form which I believe to have one controlled input:
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
...
- 12.6k
432
votes
44
answers
165k
views
Template not provided using create-react-app
When I type the create-react-app my-app command in my terminal, it appears to work - downloading all libraries successfully etc. At the end of that process however I get a message that a template was ...
- 6,674
352
votes
13
answers
777k
views
How to handle the `onKeyPress` event in ReactJS?
How can I make the onKeyPress event work in ReactJS? It should alert when enter (keyCode=13) is pressed.
var Test = React.createClass({
add: function(event){
if(event.keyCode == 13){
...
- 16.7k
332
votes
13
answers
253k
views
What is the best way to access redux store outside a react component?
@connect works great when I'm trying to access the store within a react component. But how should I access it in some other bit of code. For eg: let's say I want to use an authorization token for ...
- 4,097
284
votes
12
answers
148k
views
Accessing up-to-date state from within a callback
We use a third party library (over which there is limited control) that takes a callback as argument to a function. What is the correct way to provide that callback with the latest state? In class ...
- 3,933
238
votes
6
answers
132k
views
In useEffect, what's the difference between providing no dependency array and an empty one?
I gather that the useEffect Hook is run after every render, if provided with an empty dependency array:
useEffect(() => {
performSideEffect();
}, []);
But what's the difference between that, and ...
- 22.3k
226
votes
11
answers
265k
views
What is the difference between HashRouter and BrowserRouter in React?
I am new to programming which makes things slightly difficult for me to understand if I read the official docs.
I was reading about React Router 4 from here
In this article, the author was talking ...
- 12.2k
205
votes
6
answers
204k
views
Is it safe to use ref.current as useEffect's dependency when ref points to a DOM element?
I'm aware that ref is a mutable container so it should not be listed in useEffect's dependencies, however ref.current could be a changing value.
When a ref is used to store a DOM element like <div ...
- 12.6k
148
votes
5
answers
92k
views
Why is my onClick being called on render? - React.js
I have a component that I have created:
class Create extends Component {
constructor(props) {
super(props);
}
render() {
var playlistDOM = this.renderPlaylists(this.props.playlists);
...
- 25.1k
144
votes
6
answers
379k
views
Rendering React Components from Array of Objects
I have some data called stations which is an array containing objects.
stations : [
{call:'station one',frequency:'000'},
{call:'station two',frequency:'001'}
]
I'd like to render a ui component ...
- 4,143
130
votes
7
answers
148k
views
How to make React CSS import component-scoped?
I have several components which have the following CSS/component structure
About/style.css
.AboutContainer {
# Some style
}
p > code {
# Some style
}
And I import the CSS in the componet ...
- 2,529
127
votes
6
answers
205k
views
How to get history on react-router v4?
I having some little issue migrating from React-Router v3 to v4.
in v3 I was able to do this anywhere:
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
How do I ...
- 7,568
108
votes
3
answers
248k
views
How do I set multipart in axios with react?
When I curl something, it works fine:
curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" http://example.com/upload
How do I get this to work right with axios?...
- 43.9k
86
votes
5
answers
57k
views
react router difference between component and render
I really don't get the difference between render and component prop in Route in react router, in docs it says that render doesn't create new element but component does, I tried to go back with history ...
- 981
8
votes
3
answers
7k
views
React useState cause double rendering
Consider the canonical useState example:
import React, { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
console.log(count);
return (
<div ...
- 4,021
4
votes
1
answer
3k
views
React - User-Defined JSX Components Not rendering
I've been trying to make an AJAX call and then add it to my view after it has been retrieved.
Nothing really happens with the current code.
const View = () => (
<div>
<h1>...
- 65
4
votes
1
answer
17k
views
Next.js Router - Getting 404 page not found
I am new to Next.js, and I am playing around with the router. Some of the pages work, but the dynamic pages don't. Does anyone know what I'm doing wrong?
Here is my files structure:
The Products main ...
- 813
2
votes
2
answers
6k
views
Azure authentication Audience validation failed
I've built an ASP.net core Single tenant Web API that requires a token from Azure, I have also built a single tenant SPA via react that uses Azure to login Via MSAL-Brower. I want to use the token ...
- 21
774
votes
44
answers
1.1m
views
Attempted import error: 'Switch' is not exported from 'react-router-dom'
I don't know why I am getting this error and I can't find an answer for it anywhere. I have uninstalled the react-router-dom package and reinstalled it, but it continues to tell me that the switch ...
- 7,820