React hooks useState with props destructuring fails

Question

I'm using React hooks and trying to set the initial state of a constant inside a component 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!

Answer 1

I'm using React hooks and trying to set the initial state of a constant inside a component 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!

Answer 2

I'm using React hooks and trying to set the initial state of a constant inside a component 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!

Answer 3

I'm using React hooks and trying to set the initial state of a constant inside a component 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!

Answer 4

I'm using React hooks and trying to set the initial state of a constant inside a component 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!

Answer 5

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

Answer 6

你需要做

const [date, setDate] = useState(props.date);