DEV Community: Anssam Ghezala

How to build your reusable component

Anssam Ghezala — Thu, 01 Aug 2019 20:53:08 +0000

A table is one of the most common UIs used to display data. Depending on the table, we usually have to add features to query and manipulate the data (e.g. a search bar). However, as tables are widely used to display data, having to copy/paste the same chunk of code of a table to generate another one with other features can be painful.

Since we're using React, there should be a better way to solve this problem. This is exactly what we will do in this article. We will leverage the power of React components to create a reusable Table component that offers features while staying flexible.

For that, the Table component has to meet the following requirement:

Properly display data, while giving the possibility to customise the way the data is being displayed
Support a theming system
Be styled according to the user's wishes, while allowing them to overwrite any kind of pre-added styling
Support any kind of additional feature, such as configuring the table's density

The aim of the article is to present that component by showing how to build it and how to add features while keeping the component flexible and close to the original html table.

Building the table component

File Setup

First things first, we have to set up a couple of things:
1- index.js: simulates how the user can use the table. This is where we call the table component to use.

import React from "react";
import ReactDOM from "react-dom";

import Table from "./Table/Table";

import "./styles.css";

function App() {
  ...
  return (
    <div className="App">
      <Table ... />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

2- Table.js: the actual component. It consists of a simple a functional component receiving some props and returning a table, as well as other functional table components representing the header, the table data and the table row. This file will not be seen by the user as it represents the logic behind the table component.

import React from "react";

export default function Table(props) {
  return <table {...props} />;
}

Table.TH = function TH(props) {
  return <th {...props} />;
};

Table.TR = function TR(props) {
  return <tr {...props} />;
};

Table.TD = function TD(props) {
  return <td {...props} />;
};

3- stylesheet.css: simulates how the user can style the table. This is where we can add my own styling to the table component.

.App {
  font-family: sans-serif;
  text-align: center;
}

Now that we've set up our files, let's think how to display the table data.

Feature #1: making a table that acts exactly like the html table.

Let's say you want to display the following data:

There are two ways of doing it:

1- Using the Table exported components

The user can use Table.TR, Table.TD and Table.TH to create this table like so:

function App() {
  ...
  return (
    <div className="App">
      <Table>
        <thead>
           <Table.TR>
             <Table.TH>Name</Table.TH>
             <Table.TH>Age</Table.TH>
           </Table.TR>
        </thead>
        <tbody>
           <Table.TR>
             <Table.TD>Anssam</Table.TD>
             <Table.TD>20</Table.TD>
           </Table.TR>
        </tbody>
      </Table>
    </div>
  );
}

The advantage here is that the user can add icons, images, tables… to customise the rows.

2- Using a data prop object

Say the user only wishes to display some "raw text data" to the table. In this case, the user has to simply pass their data as a prop to the table component as such:

function App() {
  const data = [
    {
      Name: "Anssam",
      Age: "20"
    }
  ];

  return (
    <div className="App">
      <Table data={data}/>
    </div>
  );
}

And the data will be automatically displayed!

Ok, but how does that work?

Notice the structure of the data object:
const [data = [{Name: "Anssam", Age: "20"}];

It is an array of objects, each representing a table row. The keys of the object are the columns, as in the table headers, and the values are the data at some row at that specific column.

Our table component has the data that the user wishes to display, so let's first try to extract the headers of the table from that data.

a) Headers

Remember the structure of our data prop object? We can extract the headers from the keys of any element in that data prop. To do so, we simply need to use the Object.keys(SOME_DATA_ELEMENT) function to return an array of the object's keys, as in, the table headers.

Let's use the first object of the data array to get the headers.

const firstRow = props.data[0];
const headers = Object.keys(firstRow);

headers is an array containing the headers of the table. However, this is not what we wish to render: we want two th header elements, each containing the header of a column. It's time to use our Table.TH component!

const headerComponents = headers.map(el => <Table.TH>{el}</Table.TH>);

And now, we can just wrap them in a Table.TR component and ask our table functional component to render them as such:

export default function Table({ children, ...props }) {
const firstRow = props.data[0];
const headers = Object.keys(firstRow);
const headerComponents = headers.map(el => <Table.TH>{el}</Table.TH>);
  return (
    <table {...props}>
            <Table.TR>
              {headers.map(el => (
                <Table.TH>{el}</Table.TH>
              ))}
            </Table.TR>
    </table>
  );
}

b) Table body data

Now let's look at how to render the table data, as in, the rows in the body of the table. Before diving into that, let's try to get an idea as to how we can render the data of the following table:

We already have our headers from part a), but now we need a row with the values "Anssam" and "20":

<tr>
  <td>Anssam</td>
  <td>20</td>
</tr>

Quick reminder on the structure of the data prop object:
[{Name: "Anssam", Age: "21"}]

Looking at our data prop, we can directly extract the values of a specific row using the function Object.values(SOME_DATA_ELEMENT). This function returns an array of values (e.g ["Anssam", "20"]). We also know that we have to render a row for each element in the data prop, and to do so we use the SOME_ARRAY.map(SOME_FUNCTION) function to go through each element:

const rows = props.data.map(el => (
    <Table.TR>
      {Object.values(el).map(el => (
        <Table.TD>{el}</Table.TD>
      ))}
    </Table.TR>
  ));

And now we can just add that to our table render function to get the following:

export default function Table({ children, ...props }) {
  ....
  const rows = props.data.map(el => (
    <Table.TR>
      {Object.values(el).map(el => (
        <Table.TD>{el}</Table.TD>
      ))}
    </Table.TR>
  ));
  return (
    <table {...props}>
      ....
          <tbody>{rows}</tbody>
    </table>
  );
}

Youhou 🎉! We are done with simply displaying the data into the table :) Let's try style it!

Feature #2: adding styles to our table and making it "styles customisable"

Say the user wishes to make the styling of table component dependent on its state. One way of doing that would be to add conditional CSS class names and calling them depending on what state the component is in.
However, this can be boiler-plate and decrease readability.

For that reason, we need to use a tool that can support dynamic styling, like styled-components! styled-components utilises tagged template literals to style our components. It keeps track of which components are rendered on a page and injects their styles.

1- We first set up a styled.js file containing all the styling per component as such:

export const Table = styled.table`
  table-layout: fixed;
  ...
  width: 100%;
  display: table;
`;

Note: Notice the styled.table? This is basically to say that our const Table is basically a table dom element. If we wished for it to be a div, we would do styled.div.

2- We then attribute that styling to our component as such:

export default function Table({ children, ...props }) {
  return (
    <Styled.Table {...props}>
         ...
    </Styled.Table>
  );
}

As you can see, the styling is directly tied to the component, so we don't need to introduce class names, or go through countless CSS files to check with class name is used for which component.

Wait… what if someone adds the Table component to their project and wishes to overwrite the styling?

They can customise it themselves! The Table component supports any kind of styling that the user wishes to add. So the user can overwrite the pre-existent styling with their own stylesheet using normal CSS, styled-components, Sass…

Feature #3: adding themes

Now let's add a pre-built theming system that the user can use for styling the table. We'll do two simple themes: dark and light.

To do so, the user just has to chose between "DARK" and "LIGHT" for the values of the theme in the theme prop as such:

function App() {
 ...
  return (
    <div className="App">
      <Table
        ...
        theme={Table.THEME.LIGHT}
      />
    </div>
  );
}

How does that work?

First, we create our THEME variable as such:

Table.THEME = {
  DARK: "dark",
  LIGHT: "light"
};

We then dynamically style the Table component according to the theme prop using styled-components.

I won't go over the styling of every component, so let's take a look at the styling of our header elements. Say we want to change the background of the headers depending on the theme; we want the background to be black for a 'dark' theme, and white for a 'light' theme. To do so, we pass the theme as a prop to the Styled.TH component.
We can then read that prop in our TH component in the styled.js file, and return a different styling according to the theme prop as such:

export const TH = styled.th`
  background-color: ${props => {
    return props.theme === "dark" ? "#212529" : "#e8e5e5fa";
  }};
  ...
  border-bottom-color: ${props => {
    return props.theme === "dark" ? "#dee2e6" : "black";
  }};
  color: ${props => {
     return props.theme === "dark" ? "white" : "black";
    }
  }};
`;

But how did get the theme prop?

Remember the parent Table component receives that props from the user. We also know that the theme prop is an important prop for all of the embedded Table.TH, Table.TR and Table.TD components, as we may wish to edit their styles according to the selected theme. This means that we have to have our theme prop as a global data. To do so, we define a context, say themeContext, representing the theme as such:

//for passing the theme to all of the components
const themeContext = React.createContext();

We wrap our entire table with our themeContext.Provider component:

export default function Table({ children, ...props }) {
  return (
    <Styled.Table {...props}>
      <themeContext.Provider value={props.theme}>
        ...
      </themeContext.Provider>
    </Styled.Table>
  );
}

Then read that theme value from the context in our Table.TH component using the useContext hook as such:

Table.TH = function TH({ children, ...props }) {
  const theme = React.useContext(themeContext);
  return (
    <Styled.TH {...props} theme={theme}>
      {children}
    </Styled.TH>
  );
};

And we can use that logic for the rest of our theme styling! 🎉

Feature #4: Display density

Yet another cool feature the table supports is the ability to configure the density.

function App() {
  return (
    <div className="App">
      <Table
        ...
        density={Table.DENSITY.HIGH}
      />
    </div>
  );
}

Table density user choiceJust like the two pre-built themes, the user is restricted to choose between three options: low, average and high density.

Table.DENSITY = {
  LOW: "low",
  AVERAGE: "avg",
  HIGH: "high"
};

Each option edits the style of a component according to the prop passed to the table: in this case, the Table's height changes according to the density prop:

export const Table = styled.table`
  ...
  height: ${props => {
    switch (props.density) {
      case "low":
        return "130px";
      case "avg":
        return "90px";
      case "high":
        return "5px";
      default:
        return "50vh";
    }
  }};
`;

And now we have our last feature done! 🎉 You can checkout all we've done here.

Conclusion

Now you can:

Use this table as you like! Customise it as you like.
Make your own reusable component to win some time whenever you're working on a project

Notice: I hope this article was helpful, or that you gained something from it! My brothers and I are learning more about React and publish articles every month. Follow me on twitter @anssam_ghezala to get in touch! :)

You don't have to use Redux

Anssam Ghezala — Sat, 01 Jun 2019 22:20:39 +0000

A React application is basically a tree of components that communicate data with each other. Passing data between components is often painless. However, as the app tree grows, it becomes harder to pass that data while maintaining a sound & readable codebase.

Say we have the following tree structure:

Here we have a simple tree with 3 levels. In this tree, node D and node E both manipulate some similar data: Say the user inputs some text in node D, which we wish to display in node E.

How do we pass that data from node D to node E?

The article presents 3 possible approaches to tackle this issue:

Prop drilling
Redux
React's context API

The aim of the article is to compare these approaches and show that, when it comes to solving a common problem such as the one we just worded, it is possible to just stick with React's context API.

Approach 1: Prop drilling

A way of doing it would be to naively pass the data from child to parent then from parent to child through props as such: D->B->A then A->C->E.

The idea here is to use the onUserInput function triggered from child to parent to carry the input data from node D to the state at node A, then we pass that data from the state at node A to node E.

We start with node D:

class NodeD extends Component {
  render() {
    return (
      <div className="Child element">
        <center> D </center>
        <textarea
          type="text"
          value={this.props.inputValue}
          onChange={e => this.props.onUserInput(e.target.value)}
        />
      </div>
    );
  }
}

When the user types something, the onChange listener will trigger the onUserInput function from the prop and pass in the user input. That function in the node D prop will trigger another onUserInput function in the node B prop as such:

class NodeB extends Component {
  render() {
    return (
      <div className="Tree element">
        <center> B</center>
        <NodeD onUserInput={inputValue => this.props.onUserInput(inputValue)} />
      </div>
    );
  }
}

Finally, when reaching the root node A, the onUserInput triggered in the node B prop will change the state in node A to the user input.

class NodeA extends Component {
  state = {
    inputValue: ""
  };

  render() {
    return (
      <div className="Root element">
        <center> A </center>
        <NodeB
          onUserInput={inputValue => this.setState({ inputValue: inputValue })}
        />
        <NodeC inputValue={this.state.inputValue} />
      </div>
    );
  }
}

That inputValue will then be through props from Node C to its child Node E:

class NodeE extends Component {
  render() {
    return (
      <div className="Child element">
        <center> E </center>
        {this.props.inputValue}
      </div>
    );
  }
}

See it already added some complexity to our code even if it's just a small example. Can you image how it would become when the app grows? 🤔

This approach relies on the number of depth of the tree, so for a larger depth we would need to go through a larger layer of components. This can be too long to implement, too repetitive and increases code complexity.

Approach 2: Using Redux

Another way would be to use a state management library like Redux.

Redux is a predictable state container for JavaScript apps.
The state of our whole application is stored in an object tree within a single store, which your app components depend on. Every component is connected directly to the global store, and the global store life cycle is independent of the components' life cycle.

We first define the state of our app: The data we interested in is what the user types in node D. We want to make that data available to node E. To do that, we can make that data available in our store. Node E can then subscribe to it in order to access the data.
We will come back to the store in a bit.

Step 1: Define Reducer

The next thing is to define our reducer. Our reducer specifies how the application's state changes in response to actions sent to the store. We define our reducer block as such:

const initialState = {
  inputValue: ""
};

const reducer = (state = initialState, action) => {
  if (action.type === "USER_INPUT") {
    return {
      inputValue: action.inputValue
    };
  }
  return state;
};

Before the user has typed anything, we know that our state's data or inputValue will be an empty string. So we define a default initial state to our reducer with an empty string inputValue.

The logic here is once the user types something in node D, we "trigger" or rather dispatch an action and our reducer updates the state to whatever has been typed. By "update" here I do not mean "mutate" or change the current state, I do mean return a new state.

The if statement maps the dispatched action based on its type to the new state to be returned. So we already know that the dispatched action is an object containing a type key. How do we get the user input value for the new state ? We simply add another key called inputValue to our action object, and in our reducer block we make the new state's inputValue has that input value with action.inputValue. So the actions of our app will follow this architecture:

{ type: "SOME_TYPE", inputValue: "some_value" }

Ultimately, our dispatch statement will look like this:

dispatch({ type: "SOME_TYPE", inputValue: "some_value" })

And when we call that dispatch statement from whatever component, we pass in the type of the action, and the user input value.

Okay, now we have an idea of how the app works: In our input node D we dispatch an action of type USER_INPUT and pass in the value of whatever the user just typed, and in our display node E we pass in the value of the current state of the app aka the user input.

Step 2: Define the Store

In order to make our store available, we pass it in aProvider component we import from react-redux. We then wrap our App inside of it. Since we know that nodes D and E will use the data in that store, we want our Provider component to contain a common parent of those nodes, so either root node A or our entire App component. Let us chose our App component to be contained in our Provider as such:

import reducer from "./store/reducer";
import { createStore } from "redux";
import { Provider } from "react-redux";

const store = createStore(reducer);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Now that we have set up our store and reducer, we can get our hands dirty with our nodes D and E !

Step 3: Implement user input logic

Let's first take a look at node D. We are interested in what the user inputs in the textarea element. This means two things:

1- We need to implement the onChange event listener and make it store whatever the user types in the store.
2- We need the value attribute of the textarea to be the value stored in our store.

But before doing any of that, we need to set up a few things:

We first need to connect our node D component to our store. To do so, we use the connect() function from react-redux. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.

This is why we use the two mapStateToProps and mapDispatchToProps which deal with the store's state and dispatch respectively. We want our node D component to be subscribed to our store updates, as in, our app's state updates. This means that any time the app's state is updated, mapStateToProps will be called. The results of mapStateToProps is an object which will be merged into our node D's component props. Our mapDispatchToProps function lets us create functions that dispatch when called, and pass those functions as props to our component. We will make use of this by returning new function that calls dispatch() which passes in an action.

In our case, for the mapStateToProps function, we are only interested in the inputValue, so we return an object { inputValue: state.inputValue }. For the mapDispatchToProps, we return a function onUserInput that takes the input value as parameter and dispatches an action of type USER_INPUT with that value. The new state object returned by mapStateToProps and the onUserInput function are merged into our component's props. So we define our component as such:

class NodeD extends Component {
  render() {
    return (
      <div className="Child element">
        <center> D </center>
        <textarea
          type="text"
          value={this.props.inputValue}
          onChange={e => this.props.onUserInput(e.target.value)}
        />
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    inputValue: state.inputValue
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onUserInput: inputValue =>
      dispatch({ type: "USER_INPUT", inputValue: inputValue })
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NodeD);

We are done with our node D! Let's now move on to node E, where we want to display the user input.

Step 4: Implement user output logic

We wish to display the user input data on this node. We already know that this data is basically what is in the current state of our app, as in, our store. So ultimately, we wish to access that store and display its data. To do so, we first need to subscribe our node E component to the store's updates using the connect() function with the same mapStateToProps function we used before. After that, we simply need to access the data in the store from the props of the component using this.props.val as such:

class NodeE extends Component {
  render() {
    return (
      <div className="Child element">
        <center> E </center>
        {this.props.val}
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    val: state.inputValue
  };
};

export default connect(mapStateToProps)(NodeE);

And we're finally done with Redux! 🎉 You can take a look at what we just did here.

In the case of a more complex example, say with a tree with more components that share/manipulate the store, we would need those two mapStateToProps and mapDispatchToProps functions at each component. In this case, it might be wiser to separate our action types and reducers from our components by creating a separate folder for each.
…Who's got the time right?

Approach 3:Using React's context API

Now let's redo the same example using the context API.
The React Context API has been around for a while but only now in React's version 16.3.0 did it become safe to use in production. The logic here is close to Redux's logic: we have a context object which contains some global data that we wish to access from other components.
First we create a context object containing the initial state of our app as default state. We then create a Provider and a Consumer component as such:

const initialState = {
  inputValue: ""
};

const Context = React.createContext(initialState);

export const Provider = Context.Provider;
export const Consumer = Context.Consumer;

Our Provider component has as children all the components from which we want to access the context data. Like the Provider from the Redux version above. To extract or manipulate the context, we use our Consumer component which represents the component.

We want our Provider component to wrap our entire App, just like in the Redux version above. However, this Provider is a little different than the previous one we've seen. In our App component, we initialise a default state with some data, which we can share via value prop our Provider component.
In our example, we're sharing this.state.inputValue along with a function that manipulates the state, as in, our onUserInput function.

class App extends React.Component {
  state = {
    inputValue: ""
  };

  onUserInput = newVal => {
    this.setState({ inputValue: newVal });
  };

  render() {
    return (
      <Provider
        value={{ val: this.state.inputValue, onUserInput: this.onUserInput }}
      >
        <div className="App">
          <NodeA />
        </div>
      </Provider>
    );
  }
}

Now we can go ahead and access the data of our Provider component using our Consumer component :)
For node D in which the user inputs data:

const NodeD = () => {
  return (
    <div className="Child element">
      <center> D </center>
      <Consumer>
        {({ val, onUserInput }) => (
          <textarea
            type="text"
            value={val}
            onChange={e => onUserInput(e.target.value)}
          />
        )}
      </Consumer>
    </div>
  );
};

For node E in which we display the user input:

const NodeE = () => {
  return (
    <div className="Child element ">
      <center> E </center>
      <Consumer>{context => <p>{context.val}</p>}</Consumer>
    </div>
  );
};

And we're done with our context version of the example! 🎉 It wasn't that hard was it ? Check it out here
What if we have more components that we wish to be able to access the context? We can just wrap them with the Provider component and use the Consumer component to access/manipulate the context! Easy :)

Ok, but which one should I use

We can see that our Redux version of the example took a bit more time to do than our Context version. We can already see that Redux:

Requires more lines of code and can be too "boilerplate" with a more complex example (more components to access the store).
Increases complexity: It might be wiser to separate your reducer and action types from the components into unique folders/files when dealing with many components.
Introduces a learning curve: Some developers find themselves struggling to learn Redux as it requires you to learn some new concepts: reducer, dispatch, action, thunk, middleware…

If you are working on a more complex App and wish to view a history of all the dispatched action by your app, "click" on any one of them and jump to that point in time, then definitely consider using Redux's pretty dope devTools extension!

However if you're only interested in making some data global to access it from a bunch of components, you can see from our example that Redux and React's context API both do roughly the same thing. So in a way, you don't have to use Redux!