error display when trying to destruct array in React JS

Question

I am getting "Issues" list from props and when I try to destructure it with the following code const {issues} = this.props, I got 2 errors:

1-

Cannot read property 'length' of undefined

2-

index.js:1 The above error occurred in the <Issues> component:
    in Issues (at App.js:46)
    in component (created by Context.Consumer)
    in Route (at App.js:46)
    in div (at App.js:39)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:38)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

here is the class

class Issues extends Component{
    render(){ 
        const {issues} = this.props;
        const issuesList = issues.length ? (
            issues.map(issue => {

                return(
                    <div className='issues container'>
                        <h1 className='center'>Issues</h1>
                        <div className='center card-content'>

                        <span className="card-title" key={issue.id}>{issue.title}</span>

                        </div>
                    </div>
                )

            })
        ) : (<div className="center">no Issues for this member</div>)
    return(
        <div className="container">
        {issuesList}

        </div>
    )
    }
}
export default Issues;

Here is the main APP class

        class App extends Component {
      state = {
        username: null,
        repos:[],
        issues:[]
      }

      fireSearch = (username) => {
        axios.get('https://api.github.com/users/'+ username +'/repos').then(res => {
                  this.setState({

                      repos: res.data

                  })
              })
      }
      enterIssues = (urlstring) => {

        axios.get('https://api.github.com/' + urlstring).then(res => {
          this.setState({
            issues: res.data
          })
          }

        )

      }
      render(){
      return (
        <BrowserRouter>
        <div className="App">
        <Navbar />

        <Route exact path='/Addform' component={Addform} />
        <Route exact path='/:username' component={Repos} fireSearch={this.fireSearch} />
        <Addform fireSearch={this.fireSearch} />
        <Repos repos={this.state.repos} enterIssues={this.enterIssues} />
        <Route exact path='/:username/:repository' component={() => <Issues Issues={this.state.issues} />}  />

        </div>
        </BrowserRouter>
      );
    }

    }
    export default App;

variable is case sensetive in js you have passed Issues and used issues. — Mahdi Aslami Khavari
– Mahdi Aslami Khavari, Commented Apr 18, 2020 at 19:01

Tom Brown · Accepted Answer · 2020-04-18 19:01:02Z

2

You have an incorrect prop capitalisation of issues in your App class:

<Route exact path='/:username/:repository' component={() => <Issues Issues={this.state.issues} />}  />

should be

<Route exact path='/:username/:repository' component={() => <Issues issues={this.state.issues} />}  />

answered Apr 18, 2020 at 19:01

Tom Brown

4313 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

error display when trying to destruct array in React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related