CODEWITHSUNDEEP
reactjsreact-hooksinitializationreact-propsreact-state
Kiran Maniya
Kiran Maniya

Reputation: 8979

How to initialize the react function component state from props

I'm using React hooks for app state, I wondered about how to initialize the function component state using props? The useState hook doc says something definitive like,

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

I want to initialize that 0 value by the value of props being passed to the component. The Older as,

import React from 'react';

export default class Sym extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sym : [0,3,2,8,5,4,1,6],
      active: this.props.activeSym
    }
    this.setActive = this.setActive.bind(this);
  }

  setActive(itemIndex) {
    this.setState({
      active: itemIndex
    });
  }

  render() {
    return (
      <div>
        <h1>
          {this.state.sym[this.state.active]}
        </h1>
      </div>
    );
  }
}

works fine. Where the parent component passes activeSym prop and Sym component initializes the state with it using this.props.activeSym in constructor. Is there any workaround to achieve same in function component?

Upvotes: 22

Views: 34859

Answers (5)

zachary chua
zachary chua

Reputation: 21

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

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

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

this code by riddhi can be

export const newComponent = (props) => {
  const { path, value, info, update } = props;

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

since the value prop changes on every update from parent there is no need to update it using useeffect especially since the dependency array only contains value

Please do not store props in state but instead use them directly as it may lead to hard to find bugs later on when state is not updated properly

Upvotes: 0

Yash Panchal
Yash Panchal

Reputation: 81

Yes you can first define state using props:

const [name, setName] = useState(props.obj?.name);

And then you can if the state is still undefined means props doesn't have a value, then:

useEffect(() => {
  if (JSON.stringify(props.obj) !== "{}") {
    setName(props.obj?.name);
  }
}, [props.obj])

Upvotes: 1

Riddhi Patel
Riddhi Patel

Reputation: 221

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

Upvotes: 12

demkovych
demkovych

Reputation: 8827

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])

Upvotes: 35

Exifers
Exifers

Reputation: 2822

Just as follows :

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

  return (
     /* ... */
  )
}

Upvotes: 0

Related Questions