Translate Django template to ReactJS

Question

I've created some templates in Django, and I want to translate them to work in ReactJS. The thing that I'm struggling with the most is the regroup function. There's a number of ways I've thought of approaching it, but I think the easiest is probably to do it within the component. All I've managed to do is map the items which generates the entire list, but I need to have the items dynamically grouped before iterating each group.

In React I'd like to be able to apply a command like items.groupBy('start_time').groupBy('event_name').map(item =>

The output should be 'start_time', 'event_name', and then the rest of the data within each event group. Each 'start_time' will contain multiple events. I'd like to keep the code as concise as possible.

This is the Django template:

{% if event_list %}
<div id="accordian" class="panel-group" role="tablist" aria-multiselectable="true">
{% regroup event_list by start_time as start_time_list %}
{% for start_time in start_time_list %}
 <div class="row start-time">
    <div class="col">
        <h6 class="text-muted">{{ start_time.grouper|date:'  d-m-Y  H:i' }}</h6>
    </div>
</div>
{% regroup start_time.list by event as events_list_by_start_time %}
{% for event_name in events_list_by_start_time %}
<div class="panel panel-default">
<div class="card-header" id="{{ event_name.grouper|slugify }}">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordian" href="#collapse-{{ event_name.grouper|slugify }}">
 {{ event_name.grouper|title }}
</a>
</h5>
</div>
</div>
<div id="collapse-{{ event_name.grouper|slugify }}" class="panel-collapse collapse in">
<div class="panel-body">
    {% for item in event_name.list %}
 # continue iterating the items in the list

This is the render method from the React component:

  render() {
  const { error, isLoaded, items, groups } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
    return (
        <div>
        {items.map(item => (
            <h4 key={item.id}>{item.event}</h4>
            )
        )}

        </div>
        );
        }
  }
}

Answer 1

If you are setting up a React front end, it would be more sensible not to mix django templates with the react front end components. Instead set up a Django/DRF backend api that will feed your react components with JSON data.

Answer 2

To translate this template from django to react, you just have to reimplement the regroup template tag as a javascript function. For pretty much any django template tag, you can easily find some javascript library that does the same. This is not included in React.js, but instead you can import utilities from libraries such as underscore or moment.js etc.

This is the sample django template code from the example in the documentation for the {% regroup %} template tag.

{% regroup cities by country as country_list %}

<ul>
{% for country in country_list %}
    <li>{{ country.grouper }}
    <ul>
        {% for city in country.list %}
          <li>{{ city.name }}: {{ city.population }}</li>
        {% endfor %}
    </ul>
    </li>
{% endfor %}
</ul>

Here's how you could do it with react.js

// React ( or javascript ) doesn't come with a groupby function built in.
// But we can write our own. You'll also find this kind of stuff in lots 
// of javascript toolsets, such as lowdash, Ramda.js etc.

const groupBy = (key, data) => {
  const groups = {}
  data.forEach(entry => {
    const {[key]: groupkey, ...props} = entry
    const group = groups[groupkey] = groups[groupkey] || []
    group.push(props)
  })
  return groups
}
// I'll define a dumb component function for each nested level of the list.
// You can also write a big render function with everything included, 
// but I find this much more readable – and reusable.

const City = ({ name, population }) => (
  <li> {name}: {population} </li>
)

const Country = ({ country, cities }) => (
  <li>
    {country}
    <ul>{cities.map(props => <City key={props.name} {...props} />)}</ul>
  </li>
)

const CityList = ({ cities }) => {
  const groups = Object.entries(groupBy("country", cities))
  return (
    <ul>
      {groups.map(([country, cities]) => (
        <Country key={country} country={country} cities={cities} />
      ))}
    </ul>
  )
}

// We'll use the exact same data from the django docs example.

const data = [
  { name: "Mumbai", population: "19,000,000", country: "India" },
  { name: "Calcutta", population: "15,000,000", country: "India" },
  { name: "New York", population: "20,000,000", country: "USA" },
  { name: "Chicago", population: "7,000,000", country: "USA" },
  { name: "Tokyo", population: "33,000,000", country: "Japan" }
]

ReactDOM.render(<CityList cities={data} />, document.getElementById("app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main id=app></main>

If you run the snippet above, you should get the exact same output as what you find in the original django example.

<ul>
  <li>India
    <ul>
      <li>Mumbai: 19,000,000</li>
      <li>Calcutta: 15,000,000</li>
    </ul>
  </li>
  <li>USA
    <ul>
      <li>New York: 20,000,000</li>
      <li>Chicago: 7,000,000</li>
    </ul>
  </li>
  <li>Japan
    <ul>
      <li>Tokyo: 33,000,000</li>
    </ul>
  </li>
</ul>