Styjun

Looking after a wayward brother in mother's will

Strange math syntax in old basic listing

Looking for an old image of designing a cpu with plan laid out / being edited on a literal floor

The most awesome army: 80 men left and 81 returned. Is it true?

Slide Partition from Rowstore to Columnstore

How do I get a cleat that's stuck in a pedal, detached from the shoe, out?

Explain Ant-Man's "not it" scene from Avengers: Endgame

Infinitely many hats

Is there a term for this?

How to write a vulnerable moment without it seeming cliche or mushy?

Is there any Biblical Basis for 400 years of silence between Old and New Testament?

Cryptography and patents

Orientable with respect to complex cobordism?

Why is Colorado so different politically from nearby states?

Applicants clearly not having the skills they advertise

What are the problems in teaching guitar via Skype?

How can I grammatically understand "Wir über uns"?

Singlequote and backslash

Can you use a concentration spell while using Mantle of Majesty?

Why is there a need to modify system call tables in Linux?

Have powerful mythological heroes ever run away or been deeply afraid?

How should I push back against my job assigning "homework"?

Why don't I have ground wiring on any of my outlets?

Is having a hidden directory under /etc safe?

Refactoring from Hooks to a class component

How to change an element's class with JavaScript?How do I remove a property from a JavaScript object?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?Refactor a React component from function to ES6 classReact functional stateless component, PureComponent, Component; what are the differences and when should we use what?How to turn this Component Class into a pure function Stateless Component (Typescript + React)Converting my class-based component into functional components using hooksHow does useState() in react retrieve the correct state object and function for a functional component when using the state hook?How to use React Hooks to refactor existing code?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

Can you please help with refactoring a bit of code from React Hooks to a class component? I'm new in React and this gives me a hard time. I know that useState provides some "getter" and "setter", but don't know how to refactor it to a state with props in a "typical" React class component.

Hooks:

export default function App() 
const [counter, setCounter] = useState([]);

React:

class App extends React.Component {
state = 
counter:

javascript reactjs react-hooks

share|improve this question

edited Apr 7 at 16:56

ridingTom

asked Mar 24 at 11:13

ridingTomridingTom

114

add a comment | 

0

Can you please help with refactoring a bit of code from React Hooks to a class component? I'm new in React and this gives me a hard time. I know that useState provides some "getter" and "setter", but don't know how to refactor it to a state with props in a "typical" React class component.

Hooks:

export default function App() 
const [counter, setCounter] = useState([]);

React:

class App extends React.Component {
state = 
counter:

javascript reactjs react-hooks

share|improve this question

edited Apr 7 at 16:56

ridingTom

asked Mar 24 at 11:13

ridingTomridingTom

114

add a comment | 

Can you please help with refactoring a bit of code from React Hooks to a class component? I'm new in React and this gives me a hard time. I know that useState provides some "getter" and "setter", but don't know how to refactor it to a state with props in a "typical" React class component.

Hooks:

export default function App() 
const [counter, setCounter] = useState([]);

React:

class App extends React.Component {
state = 
counter:

javascript reactjs react-hooks

share|improve this question

edited Apr 7 at 16:56

ridingTom

asked Mar 24 at 11:13

ridingTomridingTom

114

export default function App() 
const [counter, setCounter] = useState([]);

class App extends React.Component {
state = 
counter:

share|improve this question

edited Apr 7 at 16:56

ridingTom

asked Mar 24 at 11:13

ridingTomridingTom

114

share|improve this question

edited Apr 7 at 16:56

ridingTom

asked Mar 24 at 11:13

ridingTomridingTom

114

asked Mar 24 at 11:13

ridingTomridingTom

114

asked Mar 24 at 11:13

ridingTomridingTom

114

2 Answers
2

active

oldest

votes

0

From the react Hooks FAQ page:

Should I use Hooks, classes, or a mix of both?

When you’re ready, we’d encourage you to start trying Hooks in new components you
write. Make sure everyone on your team is on board with using them and
familiar with this documentation. We don’t recommend rewriting your
existing classes to Hooks unless you planned to rewrite them anyway
(e.g. to fix bugs).

You can’t use Hooks inside of a class component, but you can
definitely mix classes and function components with Hooks in a single
tree. Whether a component is a class or a function that uses Hooks is
an implementation detail of that component. In the longer term, we
expect Hooks to be the primary way people write React components.

to answer your question, the equivalent class component would be:

class App extends React.Component 
 state = 
 counter: [] // equivalent of useState([]);
 
 ...
 this.setState(prevState => (
 counter: [...prevState.counter, newelement]
 )) // equivalent of setCounter(counter => [...counter, newelement]);

share|improve this answer

answered Mar 24 at 12:08

FractionFraction

1,198214

add a comment | 

1

You can take a look into this example. This a typical class components for increment/counting .

class App extends React.Component 
 state = count: 0 

 increment = () => 
 this.setState(
 count: this.state.count + 1
 );
 

 render()
 return(
 <button onClick=this.increment>+</button>
 );
 



export default App;

Here is the Hooks implementation of it.

 function App()
 const [count, setCount] = useState(0);

 const increment = () => 
 setCount(count+1);
 ;

 return(
 <button onClick=increment>+</button>
 );
 
export default App;

share|improve this answer

answered Mar 24 at 11:43

TRomeshTRomesh

1,92332236

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55323208%2frefactoring-from-hooks-to-a-class-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

From the react Hooks FAQ page:

Should I use Hooks, classes, or a mix of both?

When you’re ready, we’d encourage you to start trying Hooks in new components you
write. Make sure everyone on your team is on board with using them and
familiar with this documentation. We don’t recommend rewriting your
existing classes to Hooks unless you planned to rewrite them anyway
(e.g. to fix bugs).

You can’t use Hooks inside of a class component, but you can
definitely mix classes and function components with Hooks in a single
tree. Whether a component is a class or a function that uses Hooks is
an implementation detail of that component. In the longer term, we
expect Hooks to be the primary way people write React components.

to answer your question, the equivalent class component would be:

class App extends React.Component 
 state = 
 counter: [] // equivalent of useState([]);
 
 ...
 this.setState(prevState => (
 counter: [...prevState.counter, newelement]
 )) // equivalent of setCounter(counter => [...counter, newelement]);

share|improve this answer

answered Mar 24 at 12:08

FractionFraction

1,198214

add a comment | 

0

From the react Hooks FAQ page:

Should I use Hooks, classes, or a mix of both?

When you’re ready, we’d encourage you to start trying Hooks in new components you
write. Make sure everyone on your team is on board with using them and
familiar with this documentation. We don’t recommend rewriting your
existing classes to Hooks unless you planned to rewrite them anyway
(e.g. to fix bugs).

You can’t use Hooks inside of a class component, but you can
definitely mix classes and function components with Hooks in a single
tree. Whether a component is a class or a function that uses Hooks is
an implementation detail of that component. In the longer term, we
expect Hooks to be the primary way people write React components.

to answer your question, the equivalent class component would be:

class App extends React.Component 
 state = 
 counter: [] // equivalent of useState([]);
 
 ...
 this.setState(prevState => (
 counter: [...prevState.counter, newelement]
 )) // equivalent of setCounter(counter => [...counter, newelement]);

share|improve this answer

answered Mar 24 at 12:08

FractionFraction

1,198214

add a comment | 

From the react Hooks FAQ page:

Should I use Hooks, classes, or a mix of both?

When you’re ready, we’d encourage you to start trying Hooks in new components you
write. Make sure everyone on your team is on board with using them and
familiar with this documentation. We don’t recommend rewriting your
existing classes to Hooks unless you planned to rewrite them anyway
(e.g. to fix bugs).

You can’t use Hooks inside of a class component, but you can
definitely mix classes and function components with Hooks in a single
tree. Whether a component is a class or a function that uses Hooks is
an implementation detail of that component. In the longer term, we
expect Hooks to be the primary way people write React components.

to answer your question, the equivalent class component would be:

class App extends React.Component 
 state = 
 counter: [] // equivalent of useState([]);
 
 ...
 this.setState(prevState => (
 counter: [...prevState.counter, newelement]
 )) // equivalent of setCounter(counter => [...counter, newelement]);

share|improve this answer

answered Mar 24 at 12:08

FractionFraction

1,198214

class App extends React.Component 
 state = 
 counter: [] // equivalent of useState([]);
 
 ...
 this.setState(prevState => (
 counter: [...prevState.counter, newelement]
 )) // equivalent of setCounter(counter => [...counter, newelement]);

share|improve this answer

answered Mar 24 at 12:08

FractionFraction

1,198214

answered Mar 24 at 12:08

FractionFraction

1,198214

answered Mar 24 at 12:08

FractionFraction

1,198214

1

You can take a look into this example. This a typical class components for increment/counting .

class App extends React.Component 
 state = count: 0 

 increment = () => 
 this.setState(
 count: this.state.count + 1
 );
 

 render()
 return(
 <button onClick=this.increment>+</button>
 );
 



export default App;

Here is the Hooks implementation of it.

 function App()
 const [count, setCount] = useState(0);

 const increment = () => 
 setCount(count+1);
 ;

 return(
 <button onClick=increment>+</button>
 );
 
export default App;

share|improve this answer

answered Mar 24 at 11:43

TRomeshTRomesh

1,92332236

add a comment | 

1

You can take a look into this example. This a typical class components for increment/counting .

class App extends React.Component 
 state = count: 0 

 increment = () => 
 this.setState(
 count: this.state.count + 1
 );
 

 render()
 return(
 <button onClick=this.increment>+</button>
 );
 



export default App;

Here is the Hooks implementation of it.

 function App()
 const [count, setCount] = useState(0);

 const increment = () => 
 setCount(count+1);
 ;

 return(
 <button onClick=increment>+</button>
 );
 
export default App;

share|improve this answer

answered Mar 24 at 11:43

TRomeshTRomesh

1,92332236

add a comment | 

You can take a look into this example. This a typical class components for increment/counting .

class App extends React.Component 
 state = count: 0 

 increment = () => 
 this.setState(
 count: this.state.count + 1
 );
 

 render()
 return(
 <button onClick=this.increment>+</button>
 );
 



export default App;

Here is the Hooks implementation of it.

 function App()
 const [count, setCount] = useState(0);

 const increment = () => 
 setCount(count+1);
 ;

 return(
 <button onClick=increment>+</button>
 );
 
export default App;

share|improve this answer

answered Mar 24 at 11:43

TRomeshTRomesh

1,92332236

class App extends React.Component 
 state = count: 0 

 increment = () => 
 this.setState(
 count: this.state.count + 1
 );
 

 render()
 return(
 <button onClick=this.increment>+</button>
 );
 



export default App;

 function App()
 const [count, setCount] = useState(0);

 const increment = () => 
 setCount(count+1);
 ;

 return(
 <button onClick=increment>+</button>
 );
 
export default App;

share|improve this answer

answered Mar 24 at 11:43

TRomeshTRomesh

1,92332236

answered Mar 24 at 11:43

TRomeshTRomesh

1,92332236

answered Mar 24 at 11:43

TRomeshTRomesh

1,92332236