How to get state value inside `this.state` object

Question

I have a stateful React Component, And i want to access a value of state form inside the state object, specifically number_rows .

class Contracts extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      number_rows: 30, //starting default
      data: props.data
        .sort((a, b) => this.high_to_low(a, b, "latestVolume"))
        .slice(0, this.state.number_rows)
    };
  }
  render(){
    return(
      ...
    )
  }
}
export default Contracts;

I cant get my slice() to read the number of rows set in this.state.number_rows

example

b={a:'a', c:b.a}
{a: "a", c: "a"}

I tried state.number_rows and this.number_rows Is this even possible? Is there a work around??

Thanks for your help!!

Answer 1

numbers_rows is a constant or may be changed?

If it's a constant, consider moving it out of your state since it's technically not the state of the application.

Perhaps do something like

const NUMBERS_ROWS = 30; above the Contracts component or save that variable inside your constants file(s) and import that variable on the component.

If it can be changed.

You can make your initial state of data to empty array, then you have 2 choice depending on your circumstances.

If props.data is a fetched value from an API, and the value can either be null or empty array if the fetching still in progress, use componentDidUpdate to update your data state according to props.data value after the value is already fetched.

If you're pretty sure the props.data won't be a null/empty array and already populated before the component is mounted, you can use componentDidMount to set the data state, basically you just move the logic of both sorting and slicing to either componentDidMount or componentDidUpdate based on your circumstances.

Answer 2

Maybe you can use a default number rows variable to initialize your component's state first. After that, when you need to change your number_rows variable, just call the alterNumberRows function and calculate the data using the new number_rows value, and then update the state with the newly calculated number_rows and data .

class Contracts extends React.Component {
    constructor(props) {
        super(props);

        const DEFAULT_NUMBER_ROWS = 30;

        this.state = {
            number_rows: DEFAULT_NUMBER_ROWS, // starting default
            data: props.data
                .sort((a, b) => this.high_to_low(a, b, "latestVolume"))
                .slice(0, DEFAULT_NUMBER_ROWS),
        };
    }

    alterNumberRows = () => {
        // calculate the new number_rows
        // I just add one to the previous number_rows for simplicity
        const number_rows = this.state.number_rows + 1;

        // use the newly calculated number_rows to slice a new data array
        const data = this.props.data
            .sort((a, b) => this.high_to_low(a, b, "latestVolume"))
            .slice(0, number_rows);

        this.setState({
            number_rows,
            data,
        });
    }

    render() {
        return (
            ...
        );
    }
}