Permalink
Browse files

NewDogForm commit 1 -- got a form

  • Loading branch information...
reuben committed Feb 12, 2020
1 parent c51eb10 commit 9d23333a8d319d8aebc3de2f443d76ba092d0adf
Showing with 58 additions and 0 deletions.
  1. +3 −0 README.md
  2. +3 −0 src/DogContainer/index.js
  3. +52 −0 src/NewDogForm/index.js
@@ -20,3 +20,6 @@ To fix it you program your server to speak to certain clients that it recognizes
IOW server uses HTTP headers and sometimes also a response to an OPTIONS request
to say who's allowed to connect and what they're allowed to do

SEMANTIC UI -- fun library of Graphical UI components that are very easy to use and customize

https://react.semantic-ui.com/
@@ -1,5 +1,7 @@
import React, { Component } from 'react'
import DogList from '../DogList'
import NewDogForm from '../NewDogForm'


class DogContainer extends Component {
constructor(props) {
@@ -41,6 +43,7 @@ class DogContainer extends Component {
<React.Fragment>
<p>"Dog Container"</p>
<DogList dogs={this.state.dogs}/>
<NewDogForm />
</React.Fragment>
)
}
@@ -0,0 +1,52 @@
import React, { Component } from 'react'
import { Form, Button, Label, Segment } from 'semantic-ui-react'

class NewDogForm extends Component {

constructor(props) {
super(props)
this.state = {
name: '',
owner: '',
breed: ''
}
}


render() {
return(
<Segment>
<h4>Add new dog:</h4>
<Form>
<Label>Name:</Label>
<Form.Input
type="text"
name="name"
value={this.state.name}
onChange={this.handleChange}
/>
<Label>Breed:</Label>
<Form.Input
type="text"
name="breed"
value={this.state.breed}
onChange={this.handleChange}
/>
<Label>Owner:</Label>
<Form.Input
type="text"
name="owner"
value={this.state.owner}
onChange={this.handleChange}
/>
<Button type="Submit">Create Dog</Button>
</Form>
</Segment>
)
}

}


export default NewDogForm

0 comments on commit 9d23333

Please sign in to comment.