javascript - Create a list from Array React JS - Stack Overflow

admin管理员组

文章数量:1344960

Im trying to create an array to store my category links and then display them however I'm getting nothing displaying in my DOM. Any help would be appreciated :)

import React from "react";
import { SidebarCategory } from './SidebarCategory';

class SidebarCategories extends React.Component {
    constructor() {
        super();
        this.state = {
            categories: []
        }
    }

    ponentWillMount() {
        this.setState({categories: [
            {
                id: 1,
                icon: "icon",
                title: "Home",
            },
            {
                id: 2,
                icon: "icon",
                title: "Gallery",
            }
        ]});
    }

    render() {
        return (
            <ul className="sidebar__categories container-fluid">
                {this.state.categories.map(category => {
                    return (
                        <SidebarCategory key={category.id} title={category.title} />
                    )
                })};
            </ul>
        );
    }
}

export default SidebarCategories;

edit:

console error:

bundle.js:357 Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of Sidebar. in Sidebar (created by App) in div (created by App) in App

sidebarCategory.js

import React from "react";

export class SidebarCategory extends React.Component {
    render() {
        const SidebarCategory = ({ title }) => {
          return (<div className="sidebarCategory">{title}</div>);
        }
    }
}

sidebar.js:

import React from "react";

import { SidebarCategories } from "./SidebarCategories";

export class Sidebar extends React.Component {
    render() {
        return (
            <div className="sidebar col-sm-2">
                <div className="row">
                    <div className="sidebar__header col">
                        <img alt="Logo" className="img-fluid sidebar__header__logo" src="../resources/img/logo-white.png" />
                        {'\u00A0'} <h4 className="i-block">Title</h4>
                    </div>
                </div>
                <div className="row">
                    <div className="sidebar__user container-fluid">
                        <div className="row">
                            <div className="col-sm-4">
                                <img alt="User DP" className="sidebar__user__img img-fluid rounded-circle" src="" />
                            </div>
                            <div className="col-sm-8">
                                <p><strong>Wele</strong><br />
                                Mark Hughes</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <SidebarCategories />
                </div>
            </div>
        );
    }
}

index.js:

import React from "react";
import { render } from "react-dom";

import Sidebar from "./ponents/sidebar";
import Content from "./ponents/content";

class App extends React.Component {
    render() {
        return (
            <div className="row">
                <Sidebar />
                <Content />
            </div>
        );
    }
}

render(<App className="container-fluid"/>, window.document.getElementById("app"));

Im trying to create an array to store my category links and then display them however I'm getting nothing displaying in my DOM. Any help would be appreciated :)

import React from "react";
import { SidebarCategory } from './SidebarCategory';

class SidebarCategories extends React.Component {
    constructor() {
        super();
        this.state = {
            categories: []
        }
    }

    ponentWillMount() {
        this.setState({categories: [
            {
                id: 1,
                icon: "icon",
                title: "Home",
            },
            {
                id: 2,
                icon: "icon",
                title: "Gallery",
            }
        ]});
    }

    render() {
        return (
            <ul className="sidebar__categories container-fluid">
                {this.state.categories.map(category => {
                    return (
                        <SidebarCategory key={category.id} title={category.title} />
                    )
                })};
            </ul>
        );
    }
}

export default SidebarCategories;

edit:

console error:

bundle.js:357 Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of Sidebar. in Sidebar (created by App) in div (created by App) in App

sidebarCategory.js

import React from "react";

export class SidebarCategory extends React.Component {
    render() {
        const SidebarCategory = ({ title }) => {
          return (<div className="sidebarCategory">{title}</div>);
        }
    }
}

sidebar.js:

import React from "react";

import { SidebarCategories } from "./SidebarCategories";

export class Sidebar extends React.Component {
    render() {
        return (
            <div className="sidebar col-sm-2">
                <div className="row">
                    <div className="sidebar__header col">
                        <img alt="Logo" className="img-fluid sidebar__header__logo" src="../resources/img/logo-white.png" />
                        {'\u00A0'} <h4 className="i-block">Title</h4>
                    </div>
                </div>
                <div className="row">
                    <div className="sidebar__user container-fluid">
                        <div className="row">
                            <div className="col-sm-4">
                                <img alt="User DP" className="sidebar__user__img img-fluid rounded-circle" src="http://via.placeholder./100x100" />
                            </div>
                            <div className="col-sm-8">
                                <p><strong>Wele</strong><br />
                                Mark Hughes</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <SidebarCategories />
                </div>
            </div>
        );
    }
}

index.js:

import React from "react";
import { render } from "react-dom";

import Sidebar from "./ponents/sidebar";
import Content from "./ponents/content";

class App extends React.Component {
    render() {
        return (
            <div className="row">
                <Sidebar />
                <Content />
            </div>
        );
    }
}

render(<App className="container-fluid"/>, window.document.getElementById("app"));

• javascript
• arrays
• reactjs

Share Follow edited Aug 14, 2017 at 11:27 MarkHughes88 asked Aug 14, 2017 at 10:06 MarkHughes88MarkHughes88 66933 gold badges1414 silver badges3030 bronze badges 13

• Are you getting any console errors? – StudioTime Commented Aug 14, 2017 at 10:09
• bundle.js:357 Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in. Check the render method of Sidebar. in Sidebar (created by App) in div (created by App) in App – MarkHughes88 Commented Aug 14, 2017 at 10:11
• @MarkHughes88 where you are using loop to create the elements, also can you show SidebarCategory ponent? – Mayank Shukla Commented Aug 14, 2017 at 10:12
• ah. I dont think i have looped through them. wheres best to do that? – MarkHughes88 Commented Aug 14, 2017 at 10:16
• Do you have any files named "Sidebar.js"? Looks like you have not exported anything from that file. The error is related to that file. – Win Commented Aug 14, 2017 at 10:33

 |  Show 8 more ments

5 Answers 5

Sorted by: Reset to default 3

import React from "react";
import SidebarCategory from './SidebarCategory';

class SidebarCategories extends React.Component {
    constructor() {
        super();
        this.state = {
            categories: []
        }
    }

    ponentWillMount() {
        this.setState({categories: [
            {
                id: 1,
                title: "Home",
            },
            {
                id: 2,
                title: "Gallery",
            }
        ]});
    }

    render() {
        return (
            <ul className="sidebar__categories container-fluid">
                <SidebarCategory categories={this.state.categories} />
            </ul>
        );
    }
}

export default SidebarCategories;

And add this in your SidebarCategory file:-

import React from "react";

export class SidebarCategory extends React.Component {
    render() {
        return (
            <li className="sidebar__category container-fluid">
                <div className="row">
                      <div className="col-sm-10">
                          {this.props.categories.map((category, key) =>(
                            <span key={key}>{category.title}</span>
                          ))}
                      </div>
                </div>
            </li>
        );
    }
}

At the moment you're not iterating over your categories you have held in state, so the first thing is to map over them and provide your sub-ponent <SidebarCategory> the data it needs; a key from the category id, and the title.

render() {
  return (
    <ul className = "sidebar__categories container-fluid">
    {this.state.categories.map(category => {
      return (
        <SidebarCategory
          key={category.title}
          title={category.title}
        />
      )
    })}
    </ul>
  );
}

Then your <SidebarCategory> ponent should return a div (for example) the title of which is filled in from the props that you've provided it.

const SidebarCategory = ({ title }) => {
  return <div className="SidebarCategory">{title}</div>
}

export default SidebarCategory;

First in SidebarCategories

import {SidebarCategory}... //with curly braces

Second in Sidebar:

import SidebarCategories from "./SidebarCategories"; //without curly braces

See:

export class SidebarCategory //no default -> import {SidebarCategory} from...
export default SidebarCategories; //with default -> import SidebarCategories from ...

Try these: index.js

import React from "react";
import { render } from "react-dom";

import Sidebar from "./ponents/sidebar";
import Content from "./ponents/content";

class App extends React.Component {
    render() {
        return (
            <div className="row">
                <Sidebar />
                <Content />
            </div>
        );
    }
}

render(<App className="container-fluid"/>, document.getElementById("app"));

Sidebar.js

import React from "react";

import SidebarCategories from "./SidebarCategories";

class Sidebar extends React.Component {
    render() {
        return (
            <div className="sidebar col-sm-2">
                <div className="row">
                    <div className="sidebar__header col">
                        <img alt="Logo" className="img-fluid sidebar__header__logo" src="../resources/img/logo-white.png" />
                        {'\u00A0'} <h4 className="i-block">Title</h4>
                    </div>
                </div>
                <div className="row">
                    <div className="sidebar__user container-fluid">
                        <div className="row">
                            <div className="col-sm-4">
                                <img alt="User DP" className="sidebar__user__img img-fluid rounded-circle" src="http://via.placeholder./100x100" />
                            </div>
                            <div className="col-sm-8">
                                <p><strong>Wele</strong><br />
                                Mark Hughes</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <SidebarCategories />
                </div>
            </div>
        );
    }
}

export default Sidebar;

SidebarCategory.js

import React from "react";

class SidebarCategory extends React.Component {
    render() {
        return (
                <div className="row">
                      <div className="col-sm-10">
                          {this.props.category.title}
                      </div>
                </div>
        );
    }
}

export default SidebarCategory;

SidebarCategories.js

import React from "react";
import SidebarCategory from './SidebarCategory';

class SidebarCategories extends React.Component {
    constructor() {
        super();
        this.state = {
            categories: []
        }
    }

    ponentWillMount() {
        this.setState({categories: [
            {
                id: 1,
                title: "Home",
            },
            {
                id: 2,
                title: "Gallery",
            }
        ]});
    }

    render() {
        let list = this.state.categories.map((category) => {
          <li className="sidebar__category container-fluid" key={category.id}><SidebarCategory category={category} /></li>
        });

        return (
            <ul className="sidebar__categories container-fluid">
                {list}
            </ul>
        );
    }
}

export default SidebarCategories;

I believe the issue is in your sidebarCategory.js, you created a stateless (arrow function) ponent inside a stateful ponent.

since its just a ponent that render data from its props you can use the stateless/arrow function alone like this.

    const SidebarCategory = ({ title }) => {
      return (<div className="sidebarCategory">{title}</div>);
    }
    export default SidebarCategory; // this way its exported as default ponent, import it without using curly brackets (import SidebarCategory from './SidebarCategory';
    // OR
    export SidebarCategory; // this way its exported as non-default ponent, import it using the curly brackets (import {SidebarCategory} from './SidebarCategory';

本文标签： javascriptCreate a list from Array React JSStack Overflow