Creating lists and using live data in React Studio

In this episode, we show you how to use data as content in your design through data slots and data sheets, including assigning data to component properties, and vice versa. Moreover, the latest data plugin allows you to fetch live data from external resources (JSON!) and use it in your app. The making of a comment page is introduced here as an example.

Data Sheet, List, and Component Properties

Let’s begin with high-level data linkage between data and React components. In most cases, your data is stored in data sheets with multiple rows. The structured data is then visualised as a List view containing multiple items with the same style, while each item represents a row of data. This List representation is very common in modern apps, like Instagram. In React, the item of a List can be conveniently wrapped as a component whose properties are just perfect for carrying data.

High-level data linkage between data sheet and component properties

In the following, we’ll walk you through the making of the template “Comments (Simple)” which is available through File/New from Template. It allows users to input their name and comment. The input data is saved to a data sheet which updates the comment list dynamically. Thanks to React Studio’s “Publish to Web” feature, here is the preview:

The making of List

Let’s first make a List! It’s super easy. Simply prepare the elements that you need for a single item/component in the canvas, select all of them, then click “Make List.”

A window asks whether you want to create a data sheet. A list is always associated with a data sheet. If you haven’t got one yet, click “Yes, Create Data Sheet.”

Now you see how the item repeats itself in the List. What just happened is that React Studio wraps your selected elements into a component, then use this component to construct your List.

Let’s quickly check what has happened after you clicked “Yes, Create Data Sheet”. Go to Data Tab and find the sheet that React Studio just created for you. The sheet consists of columns matching your selection of elements, i.e. a column of text is created for a text element in your design on canvas, and so on. You can further edit the content of the sheet in this view. The List and the data sheet are automatically linked!

In this case, two text elements were selected for making a List. Two columns for storing text are created in the data sheet.

Before moving to the next stage, let’s check two things in your List setting. The component to form the List should be set under Element tab, while the data sheet to be injected to the List should be set under Data tab. In case you have your data sheet ready, select the List element, and assign it with your data sheet from the dropdown menu.

Linking data to component properties

Now you have a data sheet associated with the List, but not yet linked with component properties. Component properties can have value as text, image, custom css, etc., depending on what type of element the property is.

Select the text element in the “List Item 1” component, and check the Data tab on the right side of the canvas. You can see the fields of “Take value from property..” option. The dropdown menu lists the columns of the data sheet, and you can even create new properties within this component.

You can see on the start screen that the List is filled with content from your data sheet. It’s that simple.

Saving data to data sheet

Another feature demonstrated in this Comments example project is to post new comments. User input can be saved to the data sheet, which updates the List in realtime. This is done in Post component which has two text fields taking user’s input and one button to trigger the saving of data.

Check out this “post” button. Select the button and look into its Interaction tab. It’s as straightforward as it is. When a user taps the button, “Save data” is executed. The target type is a Data sheet, and the dropdown list allows your to select to which data sheet the user input should be saved. The table at the bottom lets you assign which input goes to which column of the data sheet.

Select the button element and set the interaction for saving data to the data sheet.

Similarly, you can save data to a data slot. Select the username text field and see its Interaction tab. Whenever the text is changed, the value is saved to username data slot immediately.

This is also how the title changes as you type since the title takes value from the same username data slot.

The usage of data plugin

Another exciting feature is that you can retrieve dynamic data from remote database through our data plugin. Now you can show dynamic content on your app. Here is a simple example showing how to use it.

  • Click “Data plugin setup” button on the top-right corner of Data tab.
  • Choose “Plugin: Generic JSON” and click the + button to create an instance of the plugin.
  • Input your web api query string in Source URL, and close the window. Now you have an instance for retrieving data from remote database.
  • Select or create a data sheet. Select the newly created data plugin instance in the section “Live Data from Web Service.”

Now you see the data is automatically loaded into the sheet, ready to be linked with component properties as in Comments example.

Check it out! JSON data retrieved from this web API request:
can be rendered like this on React Studio:

Try it out yourself — React Studio by Neonto.

The premium app design tool for the most advanced JavaScript UI library — React JS