there are two data sources A, B.
on the page with four columns in a row (one piece of data is a Card, row and four Card), such as: A1, B1, A2, B2.
is as follows: dataSource= {data}, data is the data source of An and B together, item= {A1, B1},
but there are some problems. Can you give me some suggestions?
<div style={{ padding: 5 }}>
<Row gutter={10}>
<Col span={20}>
<List
rowKey="id"
loading={loading}
grid={{ gutter: 10, column: 4}}
dataSource={data}
renderItem={item =>
(
<div style={{display: "inline"}}>
<List.Item>
<Card hoverable style={{ fontSize: 14, }} type={ "inner" } title={""}>
<font style={{fontSize:"20", color:"-sharp000", paddingLeft: 25}}>{[item[0].symbol,"(", item[0].cn_name,")"]}</font><br/>
<font style={{fontSize:"20", color:"-sharp000", paddingLeft: 25}}>{item[0].expiry}</font>
</Card>
</List.Item>,
<List.Item>
<Card hoverable style={{ fontSize: 14}} type={ "inner" } title={""} extra={<Switch defaultChecked onChange={this.onChange(item.symbol)}/>}>
<font style={{fontSize:"20", color:"-sharp000", paddingLeft: 25}}>{[item[1].symbol,"(", item[1].cn_name,")"]}</font><br/>
<font style={{fontSize:"20", color:"-sharp000", paddingLeft: 25}}>{item[1].expiry}</font>
</Card>
</List.Item>
</div>
)
}
/>
</Col>
</Row>
</div>
page is shown as follows. Why is the Card behind it not aligned with the previous Card? please give us some suggestions on how to modify it:
