I'm using React hooks and trying to set the initial state of a constant inside a ponent with the passed down props. I've seen multiple examples of this online, but when I do it, the array destructuring returns the whole props object, not the instance I want.

Import React, {useState} from "react";

const MyComponent = (props) => {
   console.log(props) // {date: "2019-11-26", task: "cooking"}
   const [date, setDate] = useState(props);
   console.log(date) // {date: "2019-11-26, task: "cooking"}

   return (...)
}

export default MyComponent;

I'd assume that with object/array destructuring the value of date would automatically be assigned the value from props (the string "2019-11-26"), not the whole props object. What am I missing? I can get around this by setting const [date, setDate] = useState(props.date) but that breaks eslints react plugins destructuring rule and I'd like to avoid it.

Edit

Thanks to helloitsjoe for an answer that solves my problem!

I'm using React hooks and trying to set the initial state of a constant inside a ponent with the passed down props. I've seen multiple examples of this online, but when I do it, the array destructuring returns the whole props object, not the instance I want.

Import React, {useState} from "react";

const MyComponent = (props) => {
   console.log(props) // {date: "2019-11-26", task: "cooking"}
   const [date, setDate] = useState(props);
   console.log(date) // {date: "2019-11-26, task: "cooking"}

   return (...)
}

export default MyComponent;

I'd assume that with object/array destructuring the value of date would automatically be assigned the value from props (the string "2019-11-26"), not the whole props object. What am I missing? I can get around this by setting const [date, setDate] = useState(props.date) but that breaks eslints react plugins destructuring rule and I'd like to avoid it.

Edit

Thanks to helloitsjoe for an answer that solves my problem!

• javascript
• reactjs

• What does actually fail here? – kind user Commented Nov 26, 2019 at 12:54
• "What am I missing?" The value of the state is whatever you pass to useState and/or setDate. useState returns an array with two values: The current value of the state and a function to update the state. That has nothing to do with the structure of the value you store in the state. – Felix Kling Commented Nov 26, 2019 at 12:54
• "but that breaks eslints react plugins destructuring rule and I'd like to avoid it." Did you look at the solutions provided in the documentation for that rule? – Felix Kling Commented Nov 26, 2019 at 12:56

5 Answers 5

You can destructure props in the argument definition. Note that it's best practice if you're setting state from props to name the prop initialX or defaultX to indicate that it's being set in state, and the state should be used from that point on.

const MyComponent = ({ initialDate }) => {
  const [date, setDate] = useState(initialDate);

  ...
}

you need to destructure the props like so:

const MyComponent = ({date, task}) => {
   const [myDate, setMyDate] = useState(date);
  console.log(myDate); //get the date here
}

You can do this like:

Import React, {useState} from "react";

const MyComponent = (props) => {
   const {date} = props //destructing
   console.log(props) // {date: "2019-11-26", task: "cooking"}
   const [date, setDate] = useState(date);
   console.log(date) 
   return (...)
}

export default MyComponent;

OR

Import React, {useState} from "react";

    const MyComponent = ({date}) => { //destructing
       const [date, setDate] = useState(date);
       console.log(date) 

       return (...)
    }

    export default MyComponent;

You have to destructure the props for the destructuring to actually work.

try

const MyComponent = ({date, task}) => {
   ....
}

In case the date property is inside an object you should follow this approach:

import "./styles.css";
import React, { useState } from "react";

const basket = {
  apples: 10,
  banana: 5
};

const SimpleComp = () => {
  const [{ apples, banana }, setBasket] = useState({ ...basket });

  return (
  <div>
    <button
      onClick={() =>
        setBasket((currentState) => ({
          ...currentState,
          apples: currentState.apples + 1,
          banana: currentState.banana + 1
        }))
      }
    >
    Add Fruit
    </button>
    <div> Apples : {apples} </div>
    <div> Banana : {banana} </div>
  </div>
 );
};

 export default SimpleComp; 

where to useState is been provided a copy of basket thus respecting immutability, try yourself code Sandbox

or in case of simple date variable:

import "./styles.css";
import React, { useState } from "react";

const actualDate = new Date()
const actualDateToday = actualDate.getDate()
console.log(actualDateToday);

const MyComponent = () => {
  console.log(actualDate) // {date: "2019-11-26", task: "cooking"}
  const [date, setDate] = useState(actualDateToday);
  console.log(date) // {date: "2019-11-26, task: "cooking"}
    
  return (   
    <div>
       <p> Date Today: {actualDateToday} </p>
      <button 
         onClick={() => setDate(date => date + 1)} >
         Add a day
      </button>
  
    <p> Date Tomorrow: {date}</p>

    </div>  
  );
 }
 export default MyComponent

try here code Sandbox