[英]I can partially display my content (displaying firstName instead of firstName and lastName)
how can I do to display firstName
and lastName
for People
and Invitees
colums?如何为People
和lastName
列显示firstName
和Invitees
? Because for now I can display firstName
for column People
(ie Eliot
instead of Eliot Gray
);因为现在我可以为列People
显示firstName
(即Eliot
而不是Eliot Gray
); for column Invitees
-> firstName
and lastName
are attached together (ie Paul Poel
instead of PaulPoel
) .对于列Invitees
-> firstName
和lastName
连接在一起(即Paul Poel
而不是PaulPoel
)。
export default function Meeting() {
...
const data = useMemo(
() => [
{
Header: "Id",
accessor: (row) => row.id
},
{
Header: "People",
accessor: (row) => row.people[0].firstName && row.people[0].lastName
},
{
Header: "Invitees",
accessor: (row) => row.invitees,
Cell: (props) =>
props.value !== [] && props.value.length > 0 ? (
<div>
{props.value !== []
? props.value
.map(({ firstName, lastName }) => firstName && lastName)
.join(", ")
: ""}
{props.value.length > 0 && (
<CloseIcon
text={
props.value !== []
? props.value.map((o) => (
<span key={o.firstName}>
<b>{o.firstName}</b>
<b>{o.lastName}</b>
</span>
))
: ""
}
/>
)}
</div>
) : (
""
)
}
],
[]
);
return (
<Table
data={meeting}
columns={data}
/>
);
}
My json :我的 json :
{
"meeting": [
{
"id": 1,
"people": [
{
"firstName": "Eliot",
"lastName": "Gray"
},
...
],
"invitees": [
{
"firstName": "Paul",
"lastName": "Poel"
},
...
]
}
]
}
If you want display firstName
and lastName
together for People
, append the names and return it.如果要为People
一起显示firstName
和lastName
,请附加名称并返回。
Same goes for Invities
too, instead of using &&
use +
to append and return it. Invities
也是如此,而不是使用&&
使用+
来追加和返回它。 &&
will return the value of last operand until it turns false
&&
将返回最后一个操作数的值,直到它变为false
The logical AND (&&) operator (logical conjunction) for a set of boolean operands will be true if and only if all the operands are true.当且仅当所有操作数都为真时,一组布尔操作数的逻辑与 (&&) 运算符(逻辑合取)才会为真。 Otherwise it will be false.否则会是假的。 More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.更一般地,运算符返回从左到右求值时遇到的第一个假操作数的值,或者如果它们都是真值,则返回最后一个操作数的值。
{
Header: "People",
accessor: (row) => row.people[0].firstName + " " + row.people[0].lastName
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.