I'm having issues with my reactjs code im trying to pass some props through from an array to a class but its giving me a undefined error.

FAQ.js

```
import React from "react";
import Accordions from '../components/Parts/Accordions';
import ApplyingWithUs from '../components/Parts/ApplyingWithUs';
...
export default class FAQ extends React.Component {
   render() {
        ...
return (
    <div>
        <div className="container">
            <h1>Frequently Asked Questions</h1>
            <p>&nbsp;</p>
            <h4>The Basics</h4>
            <Accordions TheBasics={TheBasics}/>
            <h4>Appling With Us</h4>
            <ApplyingWithUs ApplyingWithUsDetails={ApplyingWithUsDetails}/>
        </div>
    </div>
   );
 }
}

```

I have removed the arrays as they are long and not causing the issue

Accordions.js

```
import React from 'react';
import Accordion from './Accordion';

export default class Accordions extends React.Component {
    render(){
        return(
            <ul style={{listStyleType:"none"}}>
                {this.props.TheBasics.map((basics)=> {
                    return <Accordion basics={basics} key={basics.id} />
                })}
            </ul>
        );
    }
}

```

Accordion.js it is saying the error is at {this.state.active ? "▼" : "►"} {this.props.awu.summary} even though im passing everything through the same as {this.state.active ? "▼" : "►"} {this.props.basics.summary} just different names cause of different arrays where it is pulling data from

```
import React from 'react';

const styles = {
    active: {
        display: 'inherit',
    },
    inactive: {
        display: 'none',
    }
};

export default class Accordion extends React.Component {
    constructor(){
        super();
        this.state = {
            active: false
        };
        this.toggle = this.toggle.bind(this);
    }

    toggle(){
        this.setState({
            active: !this.state.active
        });
    }

    render(){

        const stateStyle = this.state.active ? styles.active : 
        styles.inactive;

        const hand = {
            cursor:"pointer",
        }

        return (
            <li>
                <p onClick={this.toggle} style={hand}>
                    {this.state.active ? "▼" : "►"} 
                    {this.props.basics.summary}
                </p>
                <p style={stateStyle}>
                    {this.props.basics.details}
                </p>
                <p onClick={this.toggle} style={hand}>
                     {this.state.active ? "▼" : "►"} 
                     {this.props.awu.summary}
                </p>
                <p style={stateStyle}>
                     {this.props.awu.details}
                </p>
            </li>
         )
     }
 }

```

ApplyingWithUs.js

```
import React from 'react';
import Accordion from './Accordion';

export default class ApplyingWithUs extends React.Component {
    render(){
        return(
            <ul style={{listStyleType:"none"}}>
                {this.props.ApplyingWithUsDetails.map((awu)=> {
                    return <Accordion awu={awu} key={awu.id} />
                })}
            </ul>
         );
     }
 }

```

Please Help Me.