title: How to attach data from local JS file to state in ReactJS?
body: <p>I am having trouble understanding how to access the data from a local JS file. I have read the React documentation up and down, but I'm stuck on this problem. There must be a flaw in my state/prop logic?</p>
  
  <pre><code>import announcementData from "./AnnouncementData.js"
  
  class Detail extends Component {
    constructor(props) {
      super(props);
      this.state = {
        announcement: [
          {
            id: 0,
            ...
    }
  
    async fetchDetails(id) {
      let response = announcementData;
      this.state.announcement.map(response, (value, key) =&gt; {
        this.setState({
          [value]: key
        }).catch(error =&gt; {
          this.setState({
            error: error.message
          });
        });
      });
    }
  
    async componentDidMount() {
      const { match } = this.props;
      await this.fetchDetails(match.params.id);
    }
  
    render() {
      const detail = {
        id: this.state.announcement.id,
        title: this.state.announcement.title,
        site_id: this.state.announcement.site_id,
        content: this.state.announcement.content,
        status: this.state.announcement.status,
        scheduled_at: this.state.announcement.scheduled_at,
        created_at: this.state.announcement.created_at,
        categories: this.state.announcement.categories,
        members: this.state.announcement.members
      };
      return (
        &lt;div&gt;
          &lt;ListGroup&gt;
            &lt;Announcement
              id={detail.id}
              title={detail.title}
              site_id={detail.site_id}
              content={detail.content}
              status={detail.status}
              scheduled_at={detail.scheduled_at}
              created_at={detail.created_at}
              categories={detail.categories}
              members={detail.members}
            /&gt;
          &lt;/ListGroup&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const Announcement = ({id, title, site_id, content, status, scheduled_at, created_at, categories, members}) =&gt; {
    return (
      &lt;div&gt;
        &lt;ListGroupItem&gt;ID: {id}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Title: {title}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Site ID: {site_id}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Content: {content}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Status: {status}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Scheduled at: {scheduled_at}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Created at: {created_at}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Categories: {categories}&lt;/ListGroupItem&gt;
        &lt;ListGroupItem&gt;Members: {members}&lt;/ListGroupItem&gt;
      &lt;/div&gt;
    );
  };
  
  export default Detail;
  </code></pre>
  
  <p>I'm trying to publish the details from an array from a local file (for now) to be displayed by the UI. With this minimal code, I am able to display the "Announcement" function with no data, like so:</p>
  
  <pre><code>ID:
  Title:
  Site ID:
  Content:
  Status:
  Scheduled at:
  Created at:
  Categories:
  Members:
  </code></pre>
  
  <p>I need to display the actual data coming from the .js file.
  It should be a very basic problem but I am a beginner. Any help is appreciated. Thanks!</p>
  
  <p>AnnouncementData.js:</p>
  
  <pre><code>const announcementData = [
    {
      id: 0,
      title: "John Doe",
      site_id: "my business",
      content: "I have a new business!",
      status: true,
      created_at: "14/03/2019",
      updated_at: "24/04/2019",
      categories: [{ id: 0, name: "John Doe" }],
      members: [{ id: 1, name: "Jane Doe", photo_url: "jane.png" }]
    },
  export default announcementData;
  </code></pre>