CODEWITHSUNDEEP
htmlcssreactjs
dante
dante

Reputation: 1111

how to achieve this with react.js?

Hi I want to build toggle box which have three columns in a row like below.

enter image description here

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?

Upvotes: 0

Views: 51

Answers (1)

CevaComic
CevaComic

Reputation: 2104

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'
    }
}

Upvotes: 1

Related Questions