Array returning undefined when accessing a certain index

Question

I am writing this page for a website using react and redux. My problem is when I try to access the index of the array that I get from the store I get the undefined value. But logging the array as a whole return the array correctly the following image describes what I am trying to say: ![Line 15 : console.log(this.props.reference) Line 16: console.log(this.props.reference[0])]1

At line 16 I log the whole array which is mapped to my props, which gives the result as expected but when I log this.props.reference[0] I get undefined. Here is my code for reference:

//rootreducer
const initState = {
    ref : []
}
const rootReducer = (state = initState, action) => {

    if (action.type === 'ADD_REF') {
        let updatedref = state.ref;
        updatedref[state.ref.length] = action.reference;
        return {
            ...state,
        ref: updatedref
        };
    }
    return state;
}

export default rootReducer;

//Navbar.js
import React from 'react';
import {Nav , Navbar , NavDropdown } from "react-bootstrap";
import logo from "./constants/logo.png"
import {connect} from 'react-redux';
class Navbarr extends React.Component {
    state = {

    }
    handleonClick = (num) => {
      //  console.log(this.props.reference)
      //  console.log(this.props.reference[0]);
        //this.props.reference[num].current.scrollintoView();
    }
    componentDidMount ()  {
        console.log(this.props.reference);
        console.log(this.props.reference[0]);
    }
    render() { 

        return (     
            <div>
             <Navbar bg="dark" expand="lg">
                <img src={logo} style={{padding: "15px" , width:"70px" , height: "70px"}}/>
                <Navbar.Brand style={{color: "white"}}></Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto">
                        <Nav.Link href="#home" style={{color: "white"}} onClick={this.handleonClick(0)} >About</Nav.Link>
                        <Nav.Link href="#home" style={{color: "white"}} >Interests</Nav.Link>
                        <Nav.Link href="#link"  style={{color: "white"}}>Projects</Nav.Link>
                        <Nav.Link href="#link"  style={{color: "white"}}>Experience</Nav.Link>
                        <Nav.Link href="#link"  style={{color: "white"}}>Skills</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            </div>
         );
    }
}

const mapStatetoProps = (state) => {
    return {
        reference: state.ref,
    }
}
const mapDispatchtoProps = (dispatch) => {
    return {
        addaboutref: (reference) => {dispatch({type: 'ADD_REF', reference: reference})},
    }
    }
export default connect(mapStatetoProps,mapDispatchtoProps)(Navbarr);

Can you try changing it to console.log(JSON.stringify(this.props.reference)) to see if the array has any elements? Your console messages will be updated as objects are updated (hover over the "i" icon in the console). This way, you can be sure that the console message shows the this.props.reference as it was when it mounted. — twharmon
– twharmon, Commented Apr 9, 2020 at 20:40

twharmon · Accepted Answer · 2020-04-09 21:33:58Z

1

I bet this.props.reference is [] when your component mounts. The console message will get updated if the object is updated, causing potentially misleading debugging.

You could maybe wait for this.props.reference to hold the value you need with an interval.

componentDidMount ()  {
    this.interval = setInterval(() => {
        if (this.props.reference[0]) {
            this.props.reference[0].current.scrollintoView();
            clearInterval(this.interval)
        }
    }, 50)
}

componentWillUnmount() {
    clearInterval(this.interval)
}

An interval is used to repeat an action repeatedly (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). In the example above, we are checking if this.props.reference holds values every 50 milliseconds. You can save the interval to a variable (this.interval in the code above) and clear it with clearInterval to terminate it.

Although this may get the component working, it might be a better approach to only render this component if the reference has values.

edited Apr 9, 2020 at 21:33

answered Apr 9, 2020 at 20:46

twharmon

3,7905 gold badges27 silver badges50 bronze badges

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

3 Comments

Haider Bokhari Over a year ago

Can you explain a little more why I need an Interval and what Interval is?

twharmon Over a year ago

I added a small explanation.

Haider Bokhari Over a year ago

Ok, this is giving me weird behaviour but using this I can access the indexes. this keeps on running I just want the index for my handle click function so I can scroll down once they click the text.

Collectives™ on Stack Overflow

Array returning undefined when accessing a certain index

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related