```javascript
import React from "react";
import ReactDOM from "react-dom";


class TagInput extends React.Component {
  render () {
    return (
      <form>
        <input  placeholder = "Add a tag"/>
      </form>
    );
  }
}

class Tag extends React.Component {
  render () {
    return (
      const name = this.props.name;
      <li>{name}
        <button>X</button>
      </li>
    )
  }
}

class TagList extends React.Component {
  render() {
     return (
        <ul>

        </ul>
     );
  }
}

class TagApp extends React.Component {

  render() {
    return (
      <div className = "tagComponent">
        <h2>Tag It</h2>
        <div className = "tagBox">
          <TagInput  />
          <TagList />
        </div>
      </div>
      )
   }
}

ReactDOM.render(<TagApp />, document.getElementById("app"));

The code above will create the simple user interface with no interactivity at all. 

The next step is to identify the kind of interactions that will take place between these components. The relationships between these components will determine the way the interactions will take place. So let's state what each component will do.

1. The `Tag` component receives its name via `props` from the parent component which is the `TagList` component. The `Tag` component should be able to delete itself thereby updating the state of `TagList`. The relationship between `Tag` and `TagList` is that of a child and parent where `Tag` is the child and `TagList` is the parent.

2. The `TagInput` should be able to update the `TagList` component whenever a new input is submitted. Since they both have the same parent, i.e. they are both subcomponents of a component, the `TagApp` component, they are siblings. The way they interact is different from that of a parent and child.

So how can a child component update/change a parent component? The answer is through the use of `state` and `props`.Remember though, that a state is internal to a component and can only be changed by the component itself. So how does can a child update its parent's state? I'll use an analogy to explain this.

Imagine that a parent makes a room inaccessible to the children because he keeps important items in that room. The children know what kind of items are kept in the room but are not allowed to go in there to keep or take anything. Since the parent knows that the child might need to take or keep items in that room sometimes, he provides a box in the children's room where the children can keep stuff they want to be kept in the room or write a note requesting for a particular item they need from the room. This box will be used to take these items to the room or from the room. 

This is similar to what happens to the `child` and `parent` component. The `child` has no direct access to the state(room in our analogy) of the `parent`. But since there is a need for the child to change the state of the `parent`, the parent has to provide a method (the box in our analogy) that is accessible to the `child`. This method is passed to child as a property and the child can access it by using that property. 

Now that we have explained the way parent and child interact, let's understand how siblings interact. Another illustration will be appropriate. 

Let's say a parent makes a rule, a quite abnormal rule in the house. The rule is that no child should  give his/her sibling any book without his consent. So if a child wants to give her sibling a book, she has to first give it to her parent, who then gives this book to her sibling. Very abnormal rule indeed but it will help us to understand how components that are siblings pass data to themselves.

Siblings cannot directly pass data to themselves. If a `child` component wants to update the state of a `sibling` component, it will first have to send this change to its parent and the parent will then pass this update via props to the sibling that is to be updated. Having this relationships in mind, let's continue with our app. 


The `Tag` uses `this.props.name` for its innertext and changes the state of the its parent (`TagList`) when the delete button is clicked. Let's add these features to the `Tag`.


```javascript
    class Tag extends React.Component {
      constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }

      //uses this.props.onClick to update the state of its parent when clicked.
      handleClick () {
        const tagName = this.props.name;
        this.props.onClick(tagName);
      }

      render () {
        return (
          <li>{this.props.name}
            <button onClick = {this.handleClick}>X</button>
          </li>
        )
      }
    }

    class TagList extends React.Component {
      constructor(props) {
        super(props);
        this.state = {list : this.props.value};
        this.handleClick = this.handleClick.bind(this);
      }

      //This is the method that is used by the Tag component
      handleClick(tag) {
        let list = this.state.list;
        for (let i = 0; i < list.length; i++) {
          if (list[i] == tag) {
            list.splice(i, 1);
          }
        }
         const newList = list; 
         this.setState({list : newList});
      }

      render() {
         const displayList = this.state.list;
         let tagList = displayList.map((tags, i) => 
            <Tag key={'item' + i} name = {tags} onClick = {this.handleClick} />
         );
         return (
            <ul>
                {tagList}
            </ul>
         );
      }
    }

    class TagInput extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value : ""};
        this.handleInput = this.handleInput.bind(this);
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(event) {
        this.setState({value: event.target.value});
      }

      handleSubmit() {
        event.preventDefault();
        const input = this.state.value;
        if (input == "") {
           return;
        }
        this.setState({value : ""});
        this.props.onChange(input);
      }

      render () {
        return (
          <form onSubmit = {this.handleSubmit}  >
            <input value = {this.state.value} onChange = {this.handleChange} placeholder = "Add a tag"/>
          </form>
        );
      }
    }

    class TagApp extends React.Component {
       constructor (props) {
          super(props);
          this.state = {display : [], error : ""};
          this.handleChange = this.handleChange.bind(this);
       }

       //checks if newInput is already on the list, if not, adds newInput to list.
       handleChange(newInput) {
          const isTag =(array, tag) => {
              for (let a = 0; a < array.length; a++) {
                  if (array[a] == tag) {
                  return true;
                  }
              }
            }
          const tagsArray = this.state.display;
            if (!isTag(tagsArray, newInput)) { 
              tagsArray.push(newInput);
              this.setState({display : tagsArray, error : ""});
            }
            else {
              this.setState({error :"You've already added that tag"})
            }
           }

          render() {
              return (
                  <div className = "tagComponent">
                     <h2>Tag It</h2>
                     <div className = "tagBox">
                        <TagInput onChange = {this.handleChange} />
                        <p>{this.state.error}</p>
                        <TagList value = {this.state.display}/>
                    </div>
                  </div>
              )
            }
        }