Questions tagged [react-class-based-component]
230 questions
2
votes
2 answers
How to use Context API in a class component
I'm working on a really big project with translations. I used Formspree to handle the forms. I want to translate that as well.
This is the code given by Formspree:
import React, { useContext } from "react";
import { LanguageContext } from…

Programmer Snigdho
- 35
- 1
- 7
2
votes
2 answers
How to change the background and text color within button using button onClick in React JS
I am new to React JS. I am creating a simple web page using React-bootstrap. I need to change the Heading color and the text color, and also the background color, when I click a button. For an example, when I click
the Green button, it will make…

Aye
- 55
- 1
- 9
2
votes
3 answers
How to fix - Functions are not valid as a React child?
I’m calling a function that returns some html code.
But if I want to send this function a parameter, then it tells me that Functions are not valid as a React child, the problem is that I want to access the props from the function, in order to do…

Rafael
- 2,413
- 4
- 32
- 54
2
votes
1 answer
Apexcharts Brush Chart is not working in react component
I'm using the react apexcharts.Apexcharts when I use the brush chart the chart which through the error. the code is given below with customized data. when using brush charts in my local component I'm facing the error which I have mention after the…

Sanjai Kumar
- 67
- 1
- 1
- 5
2
votes
1 answer
SyntaxError: invalid increment/decrement operand
am trying to create a calculator in react but when i do the calulaculations it gives me that syntax Error. For example when calaculate different numbers day (30 + 23423 - 3428 *5235) it gives me that error. also i cant get my Reset and backspace and…

Lugangastar
- 31
- 2
2
votes
2 answers
Cannot get an HTML element from the render() method using refs
I'm trying to create a graphics editor with ReactJS. I have my Workspace component.This component draws objects using canvas. The Workspace component is a React class component.
I cannot get an HTML element, which is in the render() method.
I…
user14497276
2
votes
2 answers
Cannot access this.setState or this.state inside Ant Modal confirm ok/cancel function
I'm having issues with accessing this.state and this.setState inside the onCancel/onOk function. I want to modify the state after confirmation or canceling the pop-up modal. If anyone's got a different approach, your guidance would be…

Charith Jayasanka
- 4,033
- 31
- 42
2
votes
1 answer
copy the node while drag and drop using react-flow-renderer
Iam trying to implement:
original node should stay in its position and doing drag and drop on it, has to create a new node at drop location. Original should stay at initial position.
dragging duplicate node should just change its position.
import…

Mounika Bathina
- 123
- 4
- 13
2
votes
1 answer
edges to the node steps are not rendering in react-flow-renderer
Iam trying to display steps in the data.js file as nodes and tried to connect those edges. But the edges are only visible. in the page.
I have used [react-flow-renderer] package1.
When i refresh the page the edges are visible for not even a…

Mounika Bathina
- 123
- 4
- 13
2
votes
3 answers
Do function components have props in React?
Can we use props in function components in React, and if then, how?I was trying to do
console.log(this.props)
above the return function in a function component but it kept giving me errors.

Salman Ahmed
- 39
- 1
- 2
2
votes
2 answers
How to use Async / Await with React hooks?
I am learning React and following a video tutorial. The instructor used class components and I'm using functional components to brush up on hooks concept.
I want to convert this code into a functional one:
return(

Yogi Katba
- 189
- 1
- 2
- 6
2
votes
2 answers
How to pass props from functional component to class component
I'm quite new to functional components and I've been on this for hours.
I simply want to pass a prop from a parent functional component to a class child component so that I will use the updated prop (which will be a boolean) to change the display of…

Olawale Oladiran
- 561
- 2
- 11
- 19
2
votes
1 answer
How to define SecureLS in React.js to secure session details like JWT token?
I have gone through the git for SecureLS, but I find it difficult to define SecureLS in React.
var ls = new SecureLS({ encodingType: 'aes' })
How can I define like this in React.js class component?

Ashrin Jose
- 83
- 2
- 9
2
votes
2 answers
How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
How can I pass a function from FUNCTIONAL to CLASS component using context in react js?
My code:
CONTEXT:
authContext.js
import React from 'react'
const AuthContext = React.createContext()
export const AuthProvider = AuthContext.Provider
export…

Nafeo Alam
- 4,000
- 3
- 14
- 22
2
votes
2 answers
React Component Not Updating After Changing A Value
In ReactJS, I'm writing a stateless component;
Since I've read avoiding unnecessary states is best practice.
The component represents an input field which executed a function when the input box contains a value.
export const InputField =…

Complexity
- 5,682
- 6
- 41
- 84