Reactアプリケーションでカードがマテリアライズされていません

Question

マテリアライズカードに関する問題が反応していますが、それらを並べて表示する必要があります。どんな助けでも大歓迎です。

{this.state.players.length ? (
     <Row className="basketball-BG"> 
    <Col m={3}> 
     <div className="card-content"> 

       <PlayersList> 
        {this.state.players.map(player => (
         <PlayersInfo key={player._id}> 

           <Card className="card small'" 
             header={<CardTitle ></CardTitle>}> 
            <a className="player-card" href={"/players/" + player._id}> 
            <div className="card-content"> 
             <h4> 
              {player.lName +" "} 
              {player.fName} 
             </h4> 
             <p> 
              {player.jersey} 
             </p> 
             <p> 
              {player.position} 
             </p> 
            </div> 
            </a> 
            <DeleteBtn onClick={() => this.deletePlayer(player._id)} /> 
           </Card> 



         </PlayersInfo> 
        ))} 
       </PlayersList> 

     </div> 
    </Col> 
     </Row> 
    ) : (
     <h3 className="center">You Dont Have any Players yet Add them to the roster</h3> 
    )} 

Answer 1

あなたは、私はちょうどこれは、しかし、それは残念ながらしかし提案のためのおかげで動作しませんでした試みた

.row-wise-spread { 
    display: flex; 
    flex-direction: row; 
}