CODEWITHSUNDEEP
reactjsnext.js
Xenon
Xenon

Reputation: 43

How do you manage component state in Next.js

I'm making a component that will keep track of text the user enters in an input and call a method when it's changed. I planned to store the input's value in state but this is undefined within the js file in /components. Here's what I've tried

export default function TalentSearch() {
  this.state = 'val';

  return (
    <div>
      <button onClick={clicked}>click me</button>
      <input type="text" name="search" />
      <div>
        <p>{this.state.value}</p>
      </div>
    </div>
  );
}

Thanks for your help ahead of time

Upvotes: 3

Views: 8234

Answers (2)

Marvin
Marvin

Reputation: 754

NextJS is a superset of React WITH new features and strategy of bundling/optimization. so all features has in React is applicable. you might want to read as well their features

Happy Coding!

Upvotes: 0

Faris Aziz
Faris Aziz

Reputation: 144

What you have defined here is a functional Component. Only class components can use this. So either you could change what you have to a class component or you can simply have state in a functional component using the useState hook like this:

import { useState } from 'react'; 

export default function TalentSearch() {
  const [value, setValue] = useState("value")

  return (
    <div>
      <button onClick={clicked}>click me</button>
      <input type="text" name="search" />
      <div>
        <p>{value}</p>
      </div>
    </div>
  );
}

Some notes

  • just call value anywhere within the component to get the current state and if you would like to change it use the set state function like this: setValue(new state)

Upvotes: 5

Related Questions