CODEWITHSUNDEEP
reactjs
user2176499
user2176499

Reputation: 393

Convert complex div container into a React component

I want to convert a complex div container done by a web designer in pure HTML into a React component. This div container has states for React to manage. I know I can convert the div to JSX but that would mean double work for both designer and myself. dangerouslySetInnerHTML doesn't handle states. The idea is that I can create subclass of React.Component, define states and render the state values into the div container without using JSX?

Here's a snippet of the div container markup:

<div id="activities_panel" class="panel">
    <div class="panel-body nav-tabs-animate nav-tabs-horizontal" data-plugin="tabs">
        <ul class="nav nav-tabs nav-tabs-line" role="tablist">
            <li class="nav-item" role="presentation">
                <a aria-controls="activities" class="active nav-link" data-toggle="tab" href="#activities" role="tab">Activities <span class="tag tag-pill tag-danger">5</span></a>
            </li>                    
        </ul>
        <div class="tab-content">
            <div class="tab-pane active animation-slide-left" id="activities" role="tabpanel">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="media">
                            <div class="media-left">
                                <a class="avatar" href="javascript:void(0)"><img alt="..." class="img-fluid" src="avatar1.jpg"></a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Avatar 1 <span>posted an updated</span></h4><small>active 14 minutes ago</small>
                                <div class="profile-brief">
                                    “Test test”
                                </div>
                            </div>
                        </div>
                    </li>                    
                </ul>
                <a class="btn btn-block btn-default profile-readMore" href="javascript:void(0)" role="button">Show more</a>
            </div>            
        </div>
    </div>
</div>

Upvotes: 0

Views: 646

Answers (1)

MattYao
MattYao

Reputation: 2555

A few tips to convert your big div into React component:

  1. I can see you can create at least three components: <activities-panel> as the container, <nav-tabs> and <tab-content> as children. Of course, you can create more sub-level components if you wish which makes the maintenance easier.
  2. Change all class to className
  3. You can either store the state variable in the container and passed them down via context API or simply use props. So the container <activities-panel> will manage the state of the component.
  4. Don't use dangerouslySetInnerHTML if possible.
  5. Use <button> for buttons and <a> for links so it is more accessible.

Upvotes: 1

Related Questions