10 React Challenges for Beginners - Lesson #2

React Challenge: Display Simple Data with React JSX

One of the building blocks of React is the ability to use HTML elements when developing components.

JSX allows us to write simple markup in HTML. JSX is often looked at as a difficult thing to learn in React, but it's worth looking into since JSX is really just JavaScript.

Learning JSX will make you a better JavaScript developer.

In this React challenge, we will take data and display it using JSX.

In this challenge, we will give you user data and you have to display it using JSX. The main tasks are:

Fork this CodeSandbox to get started.

You'll notice there are already some styles in the styles.css file. Feel free to use those.

Here's what the final page looks like:

Bonus challenges you can complete are:

  • Create a reusable component for the user details. Pass data to it using props.

JSX affords us the ability to write components using HTML-like syntax in React. To pass data into JSX elements, we use handlebars-like curly brackets {...}. These curly brackets let the JSX know to treat it as JavaScript.

JSX will evaluate anything within the curly {} brackets as JavaScript.

With this, we can pass variables, functions, evaluate expressions e.t.c. right in the component.

In the boilerplate CodeSandbox, user data is provided:

jsx
const user = {
  name: 'Chris Sev',
  location: 'Las Vegas',
  foodType: 'Everything',
  age: 28,
  likes: 'Coding into the wee hours of the morning',
  twitterUsername: 'chris__sev',
  avatar:
    'v1624211301/chris_ge6pzx.jpg'
};

Let's display this data in the DOM and use provided classes to style the output.

In the App() component, pass the user data using the handlebars-like brackets with:

jsx
// Import dependencies

const user = {
  // User data
}

function App() {

  return (
    <div className="App">

      {/* Show user data here */}
      <div className="user-deets">
        <img src={user.avatar} alt={user.name} />

        <h3>
          <a href={url}>{user.name}</a>
        </h3>

        <p>
          <strong>Location</strong> {user.location}
        </p>
        <p>
          <strong>Eats</strong> {user.foodType}
        </p>
        <p>
          <strong>Age</strong> {user.age}
        </p>
        <p>
          <strong>Likes</strong> {user.likes}
        </p>

        <p>
          {/* Twitter Link*/}
          <strong>Twitter</strong>{' '}
          <a>@{user.twitterUsername}</a>
        </p>
      </div>
    </div>
  );
}

Now, we have the data being displayed. We have bound the user's avatar to the <img src and have also added the alt attribute on the img tag.

To show a user's name, we will use our JSX curly brackets: {user.name}

We've been able to display data and also bind to an HTML attribute (src). Next, we need to create a link to the user's Twitter. We have their Twitter username (chris__sev). To create the Twitter link, we can do the following:

jsx
<a href={`https://twitter.com/@${user.twitterUsername}`}>@{user.twitterUsername}</a>

This lets us create the link inline with an ES6 template string. We want to use this link on the user's name (h3) also so let's create a url variable to hold this.

We can manipulate data before we return our JSX template. Using template literals, we can create a valid Twitter URL for the user. In the App() component:

jsx
function App() {
  const url = `https://twitter.com/${user.twitterUsername}`;

  return (
    <div className="App">

      {/* Show user data here */}
  
    </div>
  );
}

We have the full, valid URL and at the bottom of the returned JSX in the component, pass it as href to the anchor element linking to the Twitter page.

jsx
function App() {
  const url = `https://twitter.com/${user.twitterUsername}`;

  return (
    <div className="App">
      {/* Show user data here */}
      <div className="user-deets">
        <h3>
          <a href={url}>{user.name}</a>
        </h3>

        {/* User data here */}

        <p>
          <strong>Twitter</strong>
          <a href={url}>@{user.twitterUsername}</a>
        </p>
      </div>
    </div>
  );
}

Here's what the final page looks like:

Completed Version: find the completed CodeSandbox here.

Nice! We're able to display data from a user object in our component!

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)