Initializing state in React without constructor

Question

I have a class component as shown below:

import React, { Component } from "react";
import Aux from "../../../hoc/Auxilary/Auxilary";
import ComponentDetails from "./SideBarLayoutDetails";
import DropDownDetails from "../UI/DropDown/DropDownDetails";
import Row from "../UI/Row/Row";
import "./Layouts.css";
import Dropdown from "../UI/DropDown/DropDown";
import Calendar from "../UI/Calendar/Calendar";

class SideBarLayout extends Component {

    state = {
        isActive: Array(DropDownDetails.length),
        isDateActive: false,
    }


    DropDownArrowHandler = (index) =>
    {

    }

    render()
    {
        const calendar = this.state.isDateActive ? <Calendar />:null;

        return <Aux>
                <div className = "SideBar-Central">
                                <Row Elems = {ComponentDetails.TopHeaders.elements} 
                                Container = {ComponentDetails.TopHeaders.container}
                                />
                                <Dropdown Elems = {DropDownDetails[0].DateFilter} 
                                Container = {DropDownDetails[0].DateFilterContainer}
                                />
                                {calendar}
                </div>
        </Aux>
    }
}

export default SideBarLayout;

I want to initialize this.state.isActive in a loop fashion like this:

const initializedvalue = DropDownDetails.map(elem => elem.active);

and then use this initializedvalue to assign to this.state.isActive.

But I want to do this just when the component renders in the screen. What is the best way to do so? Should I use constructor? I don't prefer it as I get a warning using super(props). Please let me know the best way to do so. My end goal is to have a this.state.isActive array ready to be used in making the decisions about rendering the screen components.

that is not how react works... period. I suggest you read react documentation on how local state works vs props vs global state (redux for example) — Jonathan Alfaro
– Jonathan Alfaro, Commented Oct 15, 2020 at 4:08
Also forEach is a void function... Please read the docs you have all info there. — Dennis Vash
– Dennis Vash, Commented Oct 15, 2020 at 4:09

Ruben Helsloot · Accepted Answer · 2020-10-25 22:28:09Z

2

First, forEach does not return any value as it is a void function. So try map function instead. This will return elements for which active is true (assuming active is a boolean type property in elem)

const initializedvalues = DropDownDetails.map(elem => elem.active);

Next, if you want to use this to set this.state.isActive after render, run it in componentDidMount(). Its a lifecycle function that runs after the initial render is done.

edited Oct 25, 2020 at 22:28

Ruben Helsloot

13.2k6 gold badges33 silver badges56 bronze badges

answered Oct 15, 2020 at 4:17

Soumya Ranjan Nayak

212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shivam Sahil Over a year ago

I don't want to use componentDidMount because it will setup the values after first render cycle... rather I want to use something like ComponentWillMount. My end goal is to use this initialization before component mounts and not after.

Soumya Ranjan Nayak Over a year ago

Then use ComponentWillMount().

Collectives™ on Stack Overflow

Initializing state in React without constructor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related