how to achieve this with react.js? - html

Question

Hi I want to build toggle box which have three columns in a row like below.
the dummy data looks like below
export const topicDummy: TopicData =
[
{
id: 1,
name: '넷플릭스',
url: 'netflix'
},
{
id: 2,
name: '어도비',
url: 'adobe'
},
{
id: 3,
name: '왓챠',
url: 'watcha'
},
{
id: 4,
name: '방돌이/방순이',
url: 'roommate'
},
{
id: 5,
name: '신문구독',
url: 'newspaper'
},
{
id: 6,
name: '공동구매',
url: 'share'
},
{
id: 7,
name: 'KTX',
url: 'train'
},
{
id: 8,
name: '기타',
url: 'etc'
},
]
To achieve this,
I built function which return jsx elements.
But I don't want to build function every times when I want to build box like this.
how can I do with this?

Answer 1

With a little bit of styleing this will look just like the one in your image. It's written in JavaScript not TypeScript, but i'm pretty sure you know how to change that. (I never used TypeScript).
If you want this not to re-render each time you should probably read the documentation of React.memo().
const ToggleMenuBox = ({ goToLink }) => topicDummy.map(item =>
<div key={item.id} onClick={goToLink(item.url)} style={styles.element}>
{item.name}
</div>
)
export default () => {
const goToLink = url => () => {
console.log("Redirecting to", url)
}
return (
<div style={styles.root}>
<ToggleMenuBox goToLink={goToLink}/>
</div>
)
}
const styles = {
root: {
display: 'flex',
flexDirection: 'row',
width: 'calc(100% - 40px)',
backgroundColor: 'gray',
flexWrap: 'wrap',
borderRadius: 10,
padding: 5,
margin: '0 auto',
},
element: {
width: '33%',
textAlign: 'center',
cursor: 'pointer'
}
}