bugfix> javascript > 投稿

通常、配列にある各データに対してhtmlブロックを作成する関数を作成しましたが、機能しません。 誰かが私を助けてくれますか?

これは関数です:

makeGrid (){
    var data = test.map( x => [ x.name, x.price, ] );
    data.forEach(function(element) {
        var elem = () => ({
            type: 'div',
            props: {
                className: 'box',
                children: [{
                    type: 'i',
                    props: {
                        className: 'hvhv'
                    }
                }, {
                    type: 'h3',
                    props: {
                        children: element[0]
                    }
                }, {
                    type: 'p',
                    props: {
                        children: element[1]
                    }
                }]
                }
        });
        return elem;
    });
}

そして、ここで私は関数を実行しました:

render() {
    return (
        <div className = "Grid" >
        < section className = "boxes" >
        <h1> {this.makeGrid()} </h1>
        < /section> < /div > );
  }
}
export default Grid;

ブロックを次のようにしたい:

   < div className = "box" >
    < i className = "fas fa-chart-pie fa-4x" > < /i>
    <h3 > Analytics < /h3 >
    <p > Lorem ipsum dolor sit amet, consectetur adipisicing elit.Quasi, expedita ? < /p > < /div >

回答 1 件
  • return を追加できますか   forEach

    makeGrid (){
    var data = test.map( x => [ x.name, x.price, ] );
    return data.forEach(function(element) {
        var elem = () => ({
            type: 'div',
            props: {
                className: 'box',
                children: [{
                    type: 'i',
                    props: {
                        className: 'hvhv'
                    }
                }, {
                    type: 'h3',
                    props: {
                        children: element[0]
                    }
                }, {
                    type: 'p',
                    props: {
                        children: element[1]
                    }
                }]
                }
        });
        return elem;
    });
     }
    
    

あなたの答え