10 Days of React Challenges (Beginner): Display Simple Data with JSX

Celý článek

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.

The Challenge: Display Data using JSX

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

• Show data
• Bind data to an HTML attribute <img src=
• Create a link to the user's Twitter profile: https://twitter.com/chrisoncode

Starter Code

Fork this CodeSandbox to get started: https://codesandbox.io/s/4q3nk5kxo7

https://codesandbox.io/s/4q3nk5kxo7

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 Points

Bonus challenges you can complete are:

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

Fork this CodeSandbox to get started: https://codesandbox.io/s/4q3nk5kxo7

Solution: Display Data in JSX

TODO: Video Here

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.

The Data

In the boilerplate CodeSandbox, user data is provided:

const user = {
  name: 'Chris on Code',
  location: 'Las Vegas',
  foodType: 'Everything',
  age: 28,
  likes: 'Coding into the wee hours of the morning',
  twitterUsername: 'chrisoncode',
  avatar:
    'https://scotch-res.cloudinary.com/image/upload/v1556479698/xRZsnhr0_400x400_cpyg2t.png'
};

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

Displaying the Data using JSX

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

// 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>

      <ScotchInfoBar />
    </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}

Linking to the User's Twitter

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 (chrisoncode). To create the Twitter link, we can do the following:

<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:

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

    return (
    <div className="App">

            {/_ Show user data here _/}

      <ScotchInfoBar />
    </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.

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>

      <ScotchInfoBar />
    </div>
  );
}

Here's what the final page looks like:

Completed Version: find the completed CodeSandbox here.

https://codesandbox.io/s/jp0m0kv90v

Conclusion

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

Got questions, suggestions, and comments? We'd love to see them in the comment section. You can find other challenges here and join the live streams here. Happy keyboard slapping!