Single Page Applications are the new wave of the moment. In the midst of several frameworks and libraries that arose during the last decade to tackle better ways to build web applications, React<\/a> is now the most popular one. It\u2019s a lightweight library (yes, React is not a framework, so it means it doesn\u2019t come with all the rules, specifications and patterns that Angular, e.g., comes with), that is embraced and powered by the community, simple to use, flexible, and relies on a strong concept: components.<\/p>\n\n\n\n Components are not a concept created by React, you may say, and you would be correct. However, React made them far simpler for JavaScript developers. Now, with just the use of a single .js<\/em> file, as well as the power of ECMAScript (especially from 6+) and some good old patterns, you can create complex web applications from scratch, reusing as many components you need. This makes the reuse of code a big plus for JavaScript apps: more testable, concise, understandable, etc.<\/p>\n\n\n\n Besides that, the community grew rapidly around the React world, creating tons of new related libraries that help to boost React\u2019s power to a whole new level. From libs for centralized state management (Redux), stylizing your components (or add known libs like Bootstrap, Antd, etc.), to completely new ways of dealing with forms, remote calls, server-side rendering\u2026 The number of options is huge and continuously growing.<\/p>\n\n\n\n In this article, you\u2019ll learn how to integrate a well-known back-end API (that\u2019ll be served on top of ASP.NET) to a SPA totally made in React from scratch. React, in fact, can be integrated with whatever back-end services you want; however, this will be an excellent opportunity for you to analyze how both environments (front and back) work together in real-world scenarios.<\/p>\n\n\n\n To do this, the article covers building a CRUD application of user data, exploring the construction of both back and front ends, from the installation and configuration to the implementation. It makes use of Bootstrap for the UI, in order to cut down on worry about CSS and styles. This is the final representation of the view, once done:<\/p>\n\n\n\n <\/p>\n\n\n\n Figure 1. The final application visualization.<\/p>\n\n\n\n First, make sure you have a recent version of Visual Studio Community installed on your computer. Then, create an API project by going to the File –> New –> Project\u2026<\/em> menu and selecting the ASP.NET Core Web Application<\/em> option, as shown in Figure 2.<\/p>\n\n\n\n <\/p>\n\n\n\n Figure 2. Creating the new API project.<\/p>\n\n\n\n Give it a name and click OK<\/em>. For the next wizard screen, you\u2019re going to see that a React.js<\/em> project template is already available along with the ASP.NET Core projects. It\u2019s useful to have this, mainly for experienced developers who don\u2019t want to spend much time on setting up and copy-pasting stuff. However, as beginners, I\u2019d suggest starting from zero, with preset config. This will lead you a better understanding of the basics around how React works, as well as how you will connect the front to the back-end API.<\/p>\n\n\n\n Additionally, this example will not use the same structure VS sets up there. It consists of a project in which the front will be hosted the same place as the back-end code. Nevertheless, you will work in a side front project independent of the ASP.NET suite. This means that they\u2019ll exist in two different worlds that still communicate with each other.<\/p>\n\n\n\n After completing this tutorial, I\u2019d encourage you to go back and create another project, this time, with the project template. That way, you\u2019ll have enough knowledge to understand what VS has magically created for you.<\/p>\n\n\n\n Once finished, move on to the ASP.NET API architecture. This is going to be simple: you\u2019ll expose some \/users<\/em> endpoints to add, list, search, update and delete users in an in-memory static list in the back-end application. This way, you\u2019ll maintain three main packages in the project:<\/p>\n\n\n Make sure to create each folder in the root source folder. Start with the User.cs<\/em> file. Listing 1 shows its content.<\/p>\n\n\n\n Listing 1. User.cs class<\/p>\n\n\n\n It\u2019s just simple code with a bunch of fields to represent each input shown in Figure 1.<\/p>\n\n\n\n Listing 2 shows how the UserService.cs<\/em> will look:<\/p>\n\n\n\n Listing 2. UserService.cs class code.<\/p>\n\n\n\n There are a couple of new things going on. First, you need a static The static block initializes this list, making sure to generate as many random values as possible. The rest of the methods are just performing usual operations over the list, with the help of Linq<\/a>.<\/p>\n\n\n\n Simple, isn\u2019t it? Time to move to the controller. Make sure to rename the default one already created to UsersController.cs<\/em> (the plural is important here, once it\u2019s used for ASP.NET to apply the URI path for all operations). Then, substitute its content with the code shown in Listing 3.<\/p>\n\n\n\n Listing 3. UsersController.cs class code.<\/p>\n\n\n\n Note that most operations perform the exact same calls through the Finally, you need to make some important configurations to the Startup.cs<\/em> class. Open it and add the following changes shown in Listing 4. These are the code you need to add to the Listing 4. Code to add to ConfigureServices()<\/em> method.<\/p>\n\n\n\n Then, you need to make sure that the Cors is enabled by adding the following code snippet to the Now you can run the application and the test the endpoints on your own. Make sure to pay attention to the port where your service will be run since this is going to be important when calling the endpoints from the React code.<\/p>\n\n\n\n Now, it\u2019s React time. The first thing you must install on your computer is Node.js. I\u2019m not getting into details about Node.js and how it works or how to install it, but if you don\u2019t have it yet, follow this link for instructions<\/a>. It\u2019s very straightforward. Please, remember that, for this article, you\u2019ll need a Node.js at, at least, 8.16.0+. So, make sure to upgrade it if you\u2019re under an older version.<\/p>\n\n\n\n For the IDE, use Visual Studio Code<\/a> for the front-end, but feel free to use whichever tool you\u2019re more used to.<\/p>\n\n\n\n Because of the complexities involving React, use create-react-app<\/a>, a great shortcut to creating a preset React application that comes with default folders, initial config files, serviceWorker<\/em>, a package.json<\/em> file, some JavaScript\/CSS files and more. It makes it very easy to create an application from nothing and run it with npm or yarn.<\/p>\n\n\n\n The first command you need to run is the following:<\/p>\n\n\n\n npx<\/a> is a tool that facilitates using packages from the npm registry. Npm is a better way to deal with dependencies on the registry, and so it is the same for npx for CLI tools\/executables on the registry. You can read more about it here<\/a>.<\/p>\n\n\n\n The first limitation is the name of the project. There are some restrictions like the use of capital letters or special characters. Once you enter the command, some basic React dependencies will be immediately installed:<\/p>\n\n\n At the end, the script will have created your project with the following structure:<\/p>\n\n\n\n <\/p>\n\n\n\n The node_modules<\/em> is the directory where all your Node.js dependencies will be installed. They\u2019re going to be read from the package.json<\/em> file, which instructs npm to handle what packages retrieve from the registry (remote repo) every time you run the command npm start<\/em>. That\u2019s why this directory is usually ignored in your .gitignore<\/em> file, once npm knows where to search for all of them in case you\u2019re cloning the project for the first time or accidentally delete them.<\/p>\n\n\n\n The public<\/em> folder is the place you\u2019ll store the files that can be directly accessed from the client, like images, HTML or public scripts. Generally, the src<\/em> folder, the one that stores your JavaScript dynamic files as well as CSS, is the folder where you spend most of the time working.<\/p>\n\n\n\n Figure 3 shows the output generated by the command.<\/p>\n\n\n\n <\/p>\n\n\n\n Figure 3. create-react-app output.<\/p>\n\n\n\n You still need to add some more dependencies to the project. Since you won\u2019t take too much time on the styling of the UI, you\u2019ll make use of Bootstrap for that job. More specifically, you\u2019ll use the reactstrap library<\/a>, which is a great encapsulation of Bootstrap components as React ones.<\/p>\n\n\n\n For this, issue the following command in the root folder of the project:<\/p>\n\n\n\n That\u2019s it. Before diving into the React code, analyze the contents of package.json<\/em> file in Listing 5.<\/p>\n\n\n\n Listing 5. package.json code.<\/p>\n\n\n\n The main parts of the file are contained under Go and test it. Run First take a look at the usual header and footer parts. It\u2019s easier since you\u2019ll have contact with the menu and footer links first and understand how you can connect Bootstrap with React. For this, create a new folder \/components<\/em> into \/src<\/em> folder, which is the place to store all the scripts regarding React components. Then, create two files AppHeader.js<\/em> and AppFooter.js<\/em>. Listing 6 shows the code of the first JavaScript file.<\/p>\n\n\n\n Listing 6. First React component: AppHeader.js<\/p>\n\n\n\n There are some numbers in the comments help explain what every part of the code represents:<\/p>\n\n\n It\u2019s also important to remember that React will make sure to recall the Listing 7 shows the footer component code.<\/p>\n\n\n\n Listing 7. Second React component: AppFooter.js<\/p>\n\n\n\n This one is simpler. It doesn\u2019t make use of any state manipulation nor JavaScript functions. It\u2019s basically HTML and inline style via JSX syntax. However, notice that you\u2019re importing a new React element: Before running the example, you need to change the index.js<\/em> and App.js<\/em> files. For instance, every React application starts by a single index.js<\/em> file placed at the root of the app that\u2019ll make some initial configs and call the hierarchy of mounted components. Have a look at the final index.js<\/em> content at Listing 8.<\/p>\n\n\n\n Listing 8. index.js file.<\/p>\n\n\n\n Notice that React also makes a call to its Listing 9. App.js content.<\/p>\n\n\n\n <\/p>\n\n\n\n Figure 4. Home page with Reactstrap header and footer.<\/p>\n\n\n\n Now, it\u2019s time to get started with the body page content. However, instead of going directly to the table implementation or the fetching the data from the back-end, you\u2019ll begin with the modal component that\u2019ll be responsible for getting the form data information from the user, just like shown in Figure 5.<\/p>\n\n\n\n <\/p>\n\n\n\n Figure 5. Modal with form data.<\/p>\n\n\n\n Why this? This is a bottom-up strategy to help you understand the details from a more fine-grained perspective.<\/p>\n\n\n\n For instance, the same form will be used for both adding and editing information of a user. That\u2019ll simplify the code and allow reuse of components. Before diving in, create a new folder \/constants<\/em> at the same level of \/components<\/em> folder. Inside of it, create an index.js<\/em> file and place the following content into it:<\/p>\n\n\n\n This will be the constant of the API address. Then, create a new folder into \/components<\/em> called \/form<\/em>, to store the components related to form manipulation. Inside, create two new files: RegistrationForm.js<\/em> and RegistrationModal.js<\/em>. Listing 10 shows the code for the first one.<\/p>\n\n\n\n Listing 10. Creating the RegistrationForm.js file.<\/p>\n\n\n\n First, consider the React imports. Here, you\u2019re making use of Reactstrap form components. Then, comes the state definition: just single properties representing each one of the inputs in the user registration form.<\/p>\n\n\n\n The function componentDidMount()<\/a> is new: it is invoked immediately after a component is mounted (inserted into the tree), which is good because the user props will be passed down to this component as a property<\/a> (available through ![\"https:\/\/lh5.googleusercontent.com\/wb9C4_vEk7vFfkC1kTt4qxQ_9H6i2_T-EsWdjwNO77J1QH6HEiwGkdcznWR13xKu6c6VKOAHz-JxIKV_KNQZMnCpdnqMzwaQPT6zCLwIW5bGgrZ6LiEyYg3bh6vE2z9dff28jKEr\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2019\/08\/https-lh5-googleusercontent-com-wb9c4_vek7vffkc1.png\")
<\/figure>\n\n\n\nSetup \u2013 Back-end<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2019\/08\/word-image-85.png\")
<\/figure>\n\n\n\n\n
using System;\nnamespace ReactASPCrud.Models\n{\n public class User\n {\n public int Id { get; set; }\n public string Name { get; set; }\n public string Email { get; set; }\n public string Document { get; set; }\n public string Phone { get; set; }\n }\n}<\/pre>\n\n\n\nusing ReactASPCrud.Models;\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nnamespace ReactASPCrud.Services\n{\n public class UserService\n {\n private static List<User> users = new List<User>();\n private static int Count = 1;\n private static readonly string[] names = new string[] { \"Jonathan\", \"Mary\", \"Susan\", \"Joe\", \"Paul\", \"Carl\", \"Amanda\", \"Neil\" };\n private static readonly string[] surnames = new string[] { \"Smith\", \"O'Neil\", \"MacDonald\", \"Gay\", \"Bailee\", \"Saigan\", \"Strip\", \"Spenser\" };\n private static readonly string[] extensions = new string[] { \"@gmail.com\", \"@hotmail.com\", \"@outlook.com\", \"@icloud.com\", \"@yahoo.com\" };\n static UserService()\n {\n Random rnd = new Random();\n for (int i = 0; i < 5; i++)\n {\n string currName = names[rnd.Next(names.Length)];\n User user = new User\n {\n Id = Count++,\n Name = currName + \" \" + surnames[rnd.Next(surnames.Length)],\n Email = currName.ToLower() + extensions[rnd.Next(extensions.Length)],\n Document = (rnd.Next(0, 100000) * rnd.Next(0, 100000)).ToString().PadLeft(10, '0'),\n Phone = \"+1 888-452-1232\"\n };\n users.Add(user);\n }\n }\n public List<User> GetAll()\n {\n return users;\n }\n public User GetById(int id)\n {\n return users.Where(user => user.Id == id).FirstOrDefault();\n }\n public User Create(User user)\n {\n user.Id = Count++;\n users.Add(user);\n return user;\n }\n public void Update(int id, User user)\n {\n User found = users.Where(n => n.Id == id).FirstOrDefault();\n found.Name = user.Name;\n found.Email = user.Email;\n found.Document = user.Document;\n found.Phone = user.Phone;\n }\n public void Delete(int id)\n {\n users.RemoveAll(n => n.Id == id);\n }\n }\n}<\/pre>\n\n\n\nList<\/code> to store the elements, simulating something like a database (feel free to implement whatever storage strategy you would like). The next three arrays represent some random names, surnames and mail extensions in order to facilitate the process of generating a prelist of users and randomize their field values as well.<\/p>\n\n\n\nusing System.Collections.Generic;\nusing System.Threading.Tasks;\nusing Microsoft.AspNetCore.Cors;\nusing Microsoft.AspNetCore.Mvc;\nusing ReactASPCrud.Models;\nusing ReactASPCrud.Services;\nnamespace ReactASPCrud.Controllers\n{\n [Produces(\"application\/json\")]\n [Route(\"api\/[controller]\")]\n [ApiController]\n [EnableCors(\"ReactPolicy\")]\n public class UsersController : ControllerBase\n {\n private readonly UserService userService;\n public UsersController(UserService userService)\n {\n this.userService = userService;\n }\n \/\/ GET api\/users\n [HttpGet]\n public IEnumerable<User> Get()\n {\n return userService.GetAll();\n }\n \/\/ GET api\/users\/5\n [HttpGet(\"{id}\")]\n public async Task<IActionResult> Get(int id)\n {\n return Ok(userService.GetById(id));\n }\n \/\/ POST api\/users\n [HttpPost]\n public async Task<IActionResult> Post([FromBody] User user)\n {\n return CreatedAtAction(\"Get\", new { id = user.Id }, userService.Create(user));\n }\n \/\/ PUT api\/users\/5\n [HttpPut(\"{id}\")]\n public async Task<IActionResult> Put(int id, [FromBody] User user)\n {\n userService.Update(id, user);\n return NoContent();\n }\n \/\/ DELETE api\/users\/5\n [HttpDelete(\"{id}\")]\n public async Task<IActionResult> Delete(int id)\n {\n userService.Delete(id);\n return NoContent();\n }\n public override NoContentResult NoContent()\n {\n return base.NoContent();\n }\n }\n}<\/pre>\n\n\n\nUserService<\/code> methods; they\u2019re practically equal. However, some things are noticeable:<\/p>\n\n\n\n
EnableCors<\/code> annotation is an important point here, mainly because it sets the CORS<\/a> policy this controller must use, the one to be configured soon. Without it, request calls from a different origin (the React application, in this case) won\u2019t be allowed by the server;<\/li>\n\n\n\nCreatedAtAction()<\/code> method to return a reference to the Get<\/code> equivalent method of the then-created user. This allows the API to return a 201 HTTP status along with the header of where the created resource is located;<\/li>\n\n\n\nConfigureServices()<\/code> method:<\/p>\n\n\n\n
UserService<\/code> as a singleton object that\u2019ll be automatically available for injection throughout the project;<\/li>\n\n\n\nusing ReactASPCrud.Services\n\u2026\nservices.AddSingleton<UserService>();\nservices.AddCors(o => o.AddPolicy(\"ReactPolicy\", builder =>\n{\n builder.AllowAnyOrigin()\n .AllowAnyMethod()\n .AllowAnyHeader()\n .AllowCredentials();\n}));<\/pre>\n\n\n\nConfigure()<\/code> method:<\/p>\n\n\n\napp.UseCors(\"ReactPolicy\");<\/pre>\n\n\n\n
Setup \u2013 Front-end<\/h2>\n\n\n\n
npx create-react-app react-ui-crud<\/pre>\n\n\n\n
\n
![\"\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2019\/08\/structure.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2019\/08\/word-image-86.png\")
<\/figure>\n\n\n\nnpm install --save bootstrap reactstrap<\/pre>\n\n\n\n
{\n \"name\": \"react-ui-crud\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"react-scripts\": \"3.0.1\",\n \"reactstrap\": \"^8.0.1\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}<\/pre>\n\n\n\ndependencies<\/code> and scripts<\/code> properties. The first lists the exactly same dependencies previously installed (this is part of the way npm knows where to fetch again in case you delete them); the second configures the commands npm used when you run start<\/code>, build<\/code>, etc. along with npm<\/code> in the command line.<\/p>\n\n\n\nnpm start<\/code> in the root folder, and npm will run the application, as well as open a browser window with a simple logo of React and some code as an example.<\/p>\n\n\n\nLet\u2019s React<\/h2>\n\n\n\n
import React, { Component } from 'react'; \/\/ 1\nimport {\n Navbar,\n NavbarBrand,\n NavbarToggler,\n Collapse,\n Nav,\n NavItem,\n NavLink,\n UncontrolledDropdown,\n DropdownToggle,\n DropdownMenu,\n DropdownItem\n} from 'reactstrap'; \/\/ 2\nclass AppHeader extends Component { \/\/ 3\n state = { \/\/ 4\n isOpen: false\n };\n toggle = this.toggle.bind(this); \/\/ 5\n toggle() { \/\/ 6\n this.setState({\n isOpen: !this.state.isOpen\n })\n }\n render() { \/\/ 7\n return <Navbar color=\"dark\" dark expand=\"md\">\n <NavbarBrand href=\"\/\">\n <img src=\"https:\/\/cdn.rd.gt\/assets\/images\/global\/redgate-logo--white.svg?v=1\" width=\"128\" className=\"d-inline-block align-top\" alt=\"\" \/>\n <\/NavbarBrand>\n <NavbarToggler onClick={this.toggle} \/>\n <Collapse isOpen={this.state.isOpen} navbar>\n <Nav className=\"ml-auto\" navbar>\n <NavItem>\n <NavLink href=\"\/\">Hello<\/NavLink>\n <\/NavItem>\n <UncontrolledDropdown nav inNavbar>\n <DropdownToggle nav caret>\n World\n <\/DropdownToggle>\n <DropdownMenu right>\n <DropdownItem href=\"\/\">For U<\/DropdownItem>\n <DropdownItem>For Us<\/DropdownItem>\n <\/DropdownMenu>\n <\/UncontrolledDropdown>\n <\/Nav>\n <\/Collapse>\n <\/Navbar>;\n }\n}\nexport default AppHeader; \/\/ 8<\/pre>\n\n\n\n\n
Component <\/code>element to create a React component by class extension.<\/li>\n\n\n\nstate<\/code> variable, which can be defined right after the class declaration, and will store all the properties that are important for the functioning of the current component and just for it. Here, you\u2019re creating a boolean prop called isOpen<\/code> that\u2019ll store the current state of the dropdownmenu<\/code> (that\u2019ll be created soon).<\/li>\n\n\n\ntoggle()<\/code> function below.<\/li>\n\n\n\ntoggle()<\/code> function: it\u2019ll alter the state of the component every time is called, i.e., every time the Reactstrap component orchestrate a call to it to manage if the dropdown is open or not.<\/li>\n\n\n\nrender()<\/code> function: it\u2019s the most important overwritten function of every React component because it is responsible for returning the JSX<\/a> code (JSX is a syntax extension to JS, is similar to a template language, but with JavaScript) that visually and functionally represents the component itself. Take a closer look at the code. It\u2019s like a mix of HTML with some tags that were imported earlier from Reactstrap. They are organized in such way that needs to be correctly nested and receive the proper properties. Like in the case of <NavbarToggler><\/code> and <Collapse><\/code> components which rely on both the toggle<\/code> function and isOpen<\/code> property respectively, and previously set. The first determines which function must be called for every click on the toggle icon of the navbar, and the second gets the boolean state value that it\u2019ll use to apply the correct style for open\/closed states. Normal HTML tags are also present, but they are also JSX-like components. For example, notice the declaration of the class name of the <img><\/code> component: className<\/code>. This is JSX.<\/li>\n\n\n\nrender()<\/code> function every time the state<\/code> is changed.<\/p>\n\n\n\nimport React, { Fragment } from 'react';\nclass AppFooter extends React.Component {\n render() {\n return <Fragment>\n <hr className=\"featurette-divider\" \/>\n <footer style={{ padding: \"0 50px\" }} className=\"navbar fixed-bottom\">\n <p className=\"float-right\"><a href=\"\/\">Back to the Top<\/a><\/p>\n <p>\u00a9 2019 Simple-Talk, Inc. \u00b7 <a href=\"\/\">Term and Conditions<\/a><\/p>\n <\/footer>\n <\/Fragment>;\n }\n}\nexport default AppFooter;<\/pre>\n\n\n\nFragment<\/code>. This is an important shortcut for encapsulating coding in React. In other words, the render()<\/code> function expects to receive a root element that encloses all the other inner elements; otherwise you\u2019ll see a syntax error. In other times, you\u2019d need to use a <div><\/code> boilerplate tag to do this, but not anymore. <Fragment><\/code> will do the job without having to insert useless HTML tags into the page.<\/p>\n\n\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport 'bootstrap\/dist\/css\/bootstrap.min.css';\nimport App from '.\/App';\nimport * as serviceWorker from '.\/serviceWorker';\nReactDOM.render(<App \/>, document.getElementById('root'));\n\/\/ If you want your app to work offline and load faster, you can change\n\/\/ unregister() to register() below. Note this comes with some pitfalls.\n\/\/ Learn more about service workers: https:\/\/bit.ly\/CRA-PWA\nserviceWorker.unregister();<\/pre>\n\n\n\nrender()<\/code> function, passing the root element of the whole application, in this case, <App><\/code>. But who\u2019s App? Precisely, the App.js<\/em> that is also already preset into the src<\/em> folder (its code is in Listing 9 below). Finally, observe the import of the bootstrap.mim.css<\/em> to make sure the styling will be correctly applied.<\/p>\n\n\n\nimport React, { Component, Fragment } from 'react';\nimport AppHeader from '.\/components\/AppHeader';\nimport AppFooter from '.\/components\/AppFooter';\nclass App extends Component {\n render() {\n return <Fragment>\n <AppHeader \/>\n <AppFooter \/>\n <\/Fragment>;\n }\n}\nexport default App;<\/pre>\n\n\n\nApp<\/code> components import the two previously implemented components and mount them into another Fragment<\/code>. And that\u2019s it. Issue the npm start<\/code> command again and see what happens to your view (Figure 4).<\/p>\n\n\n\n![\"\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2019\/08\/word-image-87.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2019\/08\/word-image-88.png\")
<\/figure>\n\n\n\nexport const USERS_API_URL = 'https:\/\/localhost:5001\/api\/users';<\/pre>\n\n\n\n
import React from 'react';\nimport { Button, Form, FormGroup, Input, Label } from 'reactstrap';\nimport { USERS_API_URL } from '..\/..\/constants';\nclass RegistrationForm extends React.Component {\n state = {\n id: 0,\n name: '',\n document: '',\n email: '',\n phone: ''\n }\n componentDidMount() {\n if (this.props.user) {\n const { id, name, document, email, phone } = this.props.user\n this.setState({ id, name, document, email, phone});\n }\n }\n onChange = e => {\n this.setState({ [e.target.name]: e.target.value })\n }\n submitNew = e => {\n e.preventDefault();\n fetch(`${USERS_API_URL}`, {\n method: 'post',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n name: this.state.name,\n document: this.state.document,\n email: this.state.email,\n phone: this.state.phone\n })\n })\n .then(res => res.json())\n .then(user => {\n this.props.addUserToState(user);\n this.props.toggle();\n })\n .catch(err => console.log(err));\n }\n submitEdit = e => {\n e.preventDefault();\n fetch(`${USERS_API_URL}\/${this.state.id}`, {\n method: 'put',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n name: this.state.name,\n document: this.state.document,\n email: this.state.email,\n phone: this.state.phone\n })\n })\n .then(() => {\n this.props.toggle();\n this.props.updateUserIntoState(this.state.id);\n })\n .catch(err => console.log(err));\n }\n render() {\n return <Form onSubmit={this.props.user ? this.submitEdit : this.submitNew}>\n <FormGroup>\n <Label for=\"name\">Name:<\/Label>\n <Input type=\"text\" name=\"name\" onChange={this.onChange} value={this.state.name === '' ? '' : this.state.name} \/>\n <\/FormGroup>\n <FormGroup>\n <Label for=\"document\">Document:<\/Label>\n <Input type=\"text\" name=\"document\" onChange={this.onChange} value={this.state.document === null ? '' : this.state.document} \/>\n <\/FormGroup>\n <FormGroup>\n <Label for=\"email\">Email:<\/Label>\n <Input type=\"email\" name=\"email\" onChange={this.onChange} value={this.state.email === null ? '' : this.state.email} \/>\n <\/FormGroup>\n <FormGroup>\n <Label for=\"phone\">Phone:<\/Label>\n <Input type=\"text\" name=\"phone\" onChange={this.onChange} value={this.state.phone === null ? '' : this.state.phone}\n placeholder=\"+1 999-999-9999\" \/>\n <\/FormGroup>\n <Button>Send<\/Button>\n <\/Form>;\n }\n}\nexport default RegistrationForm;<\/pre>\n\n\n\nthis.props<\/code> snippet). The props are like params of a function in JavaScript, but in this case, as params from one component to another. The code is checking for its existence, which will mean that it\u2019s an editing action; otherwise consider it just a new registration. If the user is present, extract its props and set them to the current state. You may already guess why. Yes, it\u2019s because they need to fill the inputs before the modal opens.<\/p>\n\n\n\n