CODEWITHSUNDEEP
reactjs
Trewq
Trewq

Reputation: 3237

How to build an edit form that depends on json

I would like to have a typical “edit” form (that does a GET to an API to prepopulate a form and then an user can edit the form and the submit button does a POST)

Sounds simple, but here are the details: A GET /getformdata returns this:

{
  "mytype": "article",
  "title": "I feel bad that this is not one of my better SO questions",
  "body": "Just get to the point",
  "author": "Bob Jones",
  "Latitude": 0,
  "Longitude": 0,
  "Startdate": ""
}

Or it can also return this:

{
  "mytype": "eventlisting",
  "title": "Annual Gala",
  "body": "You have to be snooty",
  "author": "Martha Stewart",
  "Latitude": 51.507351,
  "Longitude": -0.127758,
  "Startdate": "2019-04-23T18:25:43.511Z"
}

I'd like the form to render the following html if it is an article:

<h2>Edit Article</h2>
<form>
  Headline:  <input type="text" name="title" value="I feel bad that this is not one of my better SO questions">
  Article Body:<input type="text" name="body" value="Just get to the point">
</form>

And if it is an event, render the following html

<h2>Edit Event</h2>
<form>
  Event Title:  <input type="text" name="title" value="I feel bad that this is not one of my better SO questions">
  Event Body:<input type="text" name="body" value="Just get to the point">
  Event Location:<input <!-- A google map shows up here based on lat long -->>
  Event Start Date:<input <!-- A calendar date time picker shows up here -->>
</form>

I am starting to learn react and I think the google map, calendar date time picker could be good candidates for components. I think I need to define a template for each type, and want to code to be elegant. I can do this using jquery, but I am pretty sure there is a nice way to do this, but I am not clear on how to approach this.

I'd appreciate pointing me in the right direction that has some sample code..

Upvotes: 0

Views: 1322

Answers (1)

smee
smee

Reputation: 231

There's a suprising amount of ground to cover here. Firstly, to answer your question the idea is to have separate components for Articles and EventListings and select which one to render depending on the API response using something like this snippet:

render() {

    var object = <p>Loading...</p>;

    if( this.state.object ) {
        if( this.state.objectType === "article" ) {
            object = <Article article={this.state.object} />;
        }
        else if( this.state.objectType === "eventlisting" ) {
            object = <EventListing listing={this.state.object} />;
        }
    }

    return (
        <div>
            {object}
        </div>
   );
}

But there's a lot more to getting from there to a working solution, so here's a more complete example based on a small app created with create-react-app:

App.js

import React, { Component } from 'react';
import Article from './Article';
import EventListing from './EventListing';

import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { object: null, objectType: null };

        this.handleSubmitArticle    = this.handleSubmitArticle.bind(this);
        this.handleSubmitEvent      = this.handleSubmitEvent.bind(this);
    }

    componentDidMount() {

        // Hard-coded response here, but would be fetched from API. This is a good
        // way to start out to get the hang of React (and for prototyping), but in 
        // the long run you should take a look at Redux and use that to store your
        // API responses and simply pass them in as props to your components

        let apiResponse = {
            "mytype": "article",
            "title": "I feel bad that this is not one of my better SO questions",
            "body": "Just get to the point",
            "author": "Bob Jones",
            "Latitude": 0,
            "Longitude": 0,
            "Startdate": ""
        };

        this.setState( {object: apiResponse, objectType: apiResponse.mytype } );
    }

    handleSubmitArticle(article) {
        // Call API or pass on to parent/container
    }

    handleSubmitEvent(event) {
        // Call API or pass on to parent/container
    }

    render() {

        var object = <p>Loading...</p>;

        if( this.state.object ) {
            if( this.state.objectType === "article" ) {
                object = <Article article={this.state.object} 
                            onSubmit={this.handleSubmitArticle}
                         />;
            }
            else if( this.state.objectType === "eventlisting" ) {
                object = <EventListing listing={this.state.object} 
                            onSubmit={this.handleSubmitEvent}
                          />;
            }
        }

        return (
            <div>
                {object}
            </div>
       );
    }
}

export default App;

EventListing.js

import React, { Component } from 'react';

class EventListing extends Component {

    constructor(props) {
        super(props);
        this.state = { listing: this.props.listing };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange( event ) {
        this.setState( 
            { listing: 
                {
                    ...this.state.listing, 
                    [event.target.name]: event.target.value 
                }
            }
        );
    }

    handleSubmit(event) {
        event.preventDefault();
        this.props.onSubmit(this.state.listing);
    }

    render() {
        return (
            <div className="event">
                <h2>Edit Event</h2>
                <form onSubmit={this.handleSubmit}>
                    Event Title:  
                    <input type="text" name="title" 
                        value={this.state.listing.title}
                        onChange={this.handleChange}/>

                    Event Body:
                    <input type="text" name="body" 
                        value={this.state.listing.body}
                        onChange={this.handleChange}/>
                    Event Location:<input name="location"
                        value={this.state.listing.location}
                        onChange={this.handleChange} />
                    Event Start Date:<input name="Startdate"
                        value={this.state.listing.Startdate}
                        onChange={this.handleChange} />
                  <button type="submit">Save</button>
                </form>
            </div>
        );
    }
}

export default EventListing;

Article.js

import React, { Component } from 'react';

class Article extends Component {

    constructor(props) {
        super(props);
        this.state = { article: this.props.article };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange( event ) {
        this.setState( 
            { article: 
                {
                    ...this.state.article, 
                    [event.target.name]: event.target.value 
                }
            }
        );
    }

    handleSubmit(event) {
        event.preventDefault();
        this.props.onSubmit(this.state.article);
    }


    render() {
        return (
            <div className="article">
                <h2>Edit Article</h2>
                <form onSubmit={this.handleSubmit}>
                  Headline:  
                  <input type="text" name="title" 
                      value={this.state.article.title}
                      onChange={this.handleChange}/>
                  Article Body:
                  <input type="text" name="body" 
                      value={this.state.article.body}
                      onChange={this.handleChange}/>
                  <button type="submit">Save</button>
                </form>
            </div>
        );
    }
}

export default Article;

There are several key React concepts in this code, so here are some links you may find helpful in understanding what this code is doing:

Upvotes: 2

Related Questions