score:22

Accepted answer

First you can define it from props (if the prop exist):

const [count, setCount] = useState(activeSym);

And then you can update this value, when prop doesn't have a value immediately (when component rendered):

useEffect(() => {
  if (activeSym) {
    setCount(activeSym);
  }
}, [activeSym])

score:-2

There are two ways you can change the state:

  1. one is using this.state and
  2. another one is this.setState.

We use the first method to initialize the state in the constructor, and the second method is used for the rest of the time.

Initialize State in the Constructor One way is to initialize the state is in the constructor. As we discussed earlier constructor is the first method to be called when React instantiates the class. This is the perfect place to initialize the state for the component because the constructor is called before the React renders the component in the UI.

class WithConstructor {
   
  constructor() {
   this.state = {
     name: "StackOverflow"
    }
  }
}

Initialize State Without Constructor Another way of initializing state in React is to use the Class property. Once the class is instantiated in the memory all the properties of the class are created so that we can read these properties in the render function.

class WithoutConstructor {
   
  state = {
   name: "StackOverflow"
  }
}

score:0

Just as follows :

const MyFunctionalComponent = ({myProp}) => {
  const [count, setCount] = useState(myProp)

  return (
     /* ... */
  )
}

score:10

Yes, this can be possible with functional component too! You just need to add useEffect to listen to prop change for initializing state with prop value

export const newComponent = (props) => {
  const { path, value, info, update } = props;
  const [val, setVal] = useState(value);

  useEffect(() => {
    setVal(value);
  }, [value]);

  return <div>{val}</div>;
};

Attching sandbox link

https://codesandbox.io/s/confident-agnesi-ohkq7?file=/src/MakeComponent.js


Related Query

More Query from same tag