const a = props.a; const Container = styled.div` border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; `; const Row = styled.div` display: flex; margin-bottom: 5px; `; const Key = styled.span` font-weight: bold; margin-right: 5px; `; const Value = styled.span` color: #888; `; function composeData() { return { post: { main: JSON.stringify({ path: `${a.value.accountId}/thing/${a.key}}`, blockHeight: a.blockHeight, type: a.value.type, }), }, index: { post: JSON.stringify({ key: "main", value: { type: a.value.type, // because we want to filter by type }, }), }, }; } if (a.value.type === "image") { return ( <Container> <Row> <Key>accountId:</Key> <Value>{a.accountId}</Value> </Row> <Row> <Key>blockHeight:</Key> <Value>{a.blockHeight}</Value> </Row> <Row> <Key>value.type:</Key> <Value>{a.value.type}</Value> </Row> <Row> <Key>action:</Key> <Value>{a.action}</Value> </Row> <Row> <Key>key:</Key> <Value>{a.key}</Value> </Row> <Row> <Key>index:</Key> <Value>{a.index}</Value> </Row> <CommitButton force data={composeData} className="styless"> create </CommitButton> </Container> ); }