如何为 state 数组中的每个项目添加 React JSX？

Question

I am new to React states. I have learned props and am now learning states. I'm a bit confused right now. I am creating a web app, where you can store your code snippets in an organized place. Without using states, I was able to create dummy data for the snippets using arrays. It looks like this: (pay attention to the snippets array, and then look inside runCallBack() in the JSX code to see how I am currently displaying snippets via dummy data. runCallBack() is my way of running JS code within my JSX code.

export class Content extends React.Component {
    render() {
        const runCallback = (cb) => {
            return cb();
        }    

        const collections = [
            {title: 'ReactJS', color: 'red'},
            {title: 'HTML', color: 'cyan'},
            {title: 'CSS', color: 'pink'}
        ]

        const snippets = [
            {title: 'Generate ReactJS component', date: new Date(), code: "<code>Code goes here</code>", language: 'javascript', collection: collections[0]},
            {title: 'CSS Grow on hover', date: new Date(), code: "<code>Other code goes here</code>", language: 'css', collection: collections[2]}
        ]


        return (
            <div className="content">
                <h1 className="content-header">Snippets</h1>
                <div className="w-layout-grid grid">
                    {
                        runCallback(function() {
                            const row = [];
                            for (var i = 0; i < snippets.length; i++) {
                                row.push(<Snippet title={snippets[i].title} code={snippets[i].code} date={snippets[i].date} language={snippets[i].language} collection={snippets[i].collection}/>) 
                            }
                            return row;
                        })
                    }
                    
                </div>
            </div>
        )
    }
}

Well, now I am trying to store snippets inside of state. When I run my code, nothing shows up on the page. It makes all components disappear so obviously it isnt working. But here's the non-working code here:

export class Content extends React.Component {
    constructor(props) {
        super(props)
        const collections = [
            {title: 'ReactJS', color: 'red'},
            {title: 'HTML', color: 'cyan'},
            {title: 'CSS', color: 'pink'}
        ]
        this.state = {
            snippets: [
                {title: 'Generate ReactJS component', date: new Date(), code: "<code>Code goes here</code>", language: 'javascript', collection: collections[0]},
                {title: 'CSS Grow on hover', date: new Date(), code: "<code>Other code goes here</code>", language: 'css', collection: collections[2]}  
            ]
        }
    }
    render() {
        const runCallback = (cb) => {
            return cb();
        }    

        return (
            <div className="content">
                <h1 className="content-header">Snippets</h1>
                <div className="w-layout-grid grid">
                    {
                        runCallback(function() {
                            const row = []
                            const snippets = this.state.snippets
                            for (var i = 0; i < snippets.length; i++) {
                                row.push(<Snippet title={snippets[i].title} code={snippets[i].code} date={snippets[i].date} language={snippets[i].language} collection={snippets[i].collection}/>) 
                            }
                            return row;
                        })
                    }
                    
                </div>
            </div>
        )
    }
}
export default Content

Sorry if this is a stupid question , but I am just now learning states. I was able to use states in other situations successfully, but not this scenario. I have also heard of Redux and using that for storing state data, but I am just learning one thing at a time.

Answer 1

The problem is that you're trying to access this inside a function . In that case, this will be the function, and not the component. Thus, you won't be able to access the state .

Try using an arrow function instead. You can do that just by replacing runCallback(function() { with runCallback(() => {

Answer 2

You should use the arrow inside of "runCallback". Regular functions override have their own root "this", while arrow function do not.

Maybe checkout this article for more info - https://levelup.gitconnected.com/arrow-function-vs-regular-function-in-javascript-b6337fb87032

Answer 3

Instead of your callback function, just generate the JSX using a.map method on your state array.

this.state.snippets.map((snippet) => {
   return (<JSX>...</JSX>)
})