How to add React JSX for every item in state array?-CodePudding

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.

CodePudding user response：

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(() => {

CodePudding user response：

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

CodePudding user response：

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>)
})