React function vs class component example

app.jsx

class Form extends React.Component {
	state = {
  	name: '',
    selectedRadio: 'radio1'
  };
  
  handleInputChange = (event) => {
    event.persist();
  	this.setState(() => ({name: event.target.value}));
  };
  
  handleSubmit = (event) => {
  	event.preventDefault();
    this.props.addToList(this.state);
    this.setState(() => ({name: ''}));
  };
  
  handleRadio = (event) => {
  	this.setState({
    	selectedRadio: event.target.value
    });
  };

	render() {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input value={ this.state.name } onChange={ this.handleInputChange } />
        <label>
          <input  type="radio" 
        				value="radio1"
                checked={ this.state.selectedRadio === 'radio1' } 
                onChange={ this.handleRadio } />
          <span>radio1</span>
        </label>
        <label>
          <input  type="radio" 
        				value="radio2"
                checked={ this.state.selectedRadio === 'radio2' } 
                onChange={ this.handleRadio } />
          <span>radio2</span>
        </label>
        <label>
          <input  type="radio" 
        				value="radio3"
                checked={ this.state.selectedRadio === 'radio3' } 
                onChange={ this.handleRadio } />
          <span>radio3</span>
        </label>
        <button type="submit">
          Submit
        </button>
      </form>
    );
  }
}

const Item = (props) => {
	function toggle() {
  	props.toggleItem(props.index);
  }

  return (
    <div onClick={ toggle }>
      <article>
        <h2>
          { props.name }
          {
            props.selected &&
              <i className="fa fa-star" />
          }
        </h2>

      </article>
    </div>
  );
}

const List = (props) => {
	const list = props.items.map((item, index) => {
    return <Item { ...item }
    							key={ index }
                  index={ index }
                  toggleItem={ props.toggleItem } />
  });

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

class App extends React.Component {
	state = {
  	list: [
    	{
      	name: 'item 1'
      },
      {
      	name: 'item 2'
      },
      {
      	name: 'item 3'
      }
    ]
  };
  
  addToList = (item) => {
  	this.setState((prevState) => {
    	prevState.list.push(item);
    });
  };
  
  toggleSelected = (index) => {
    this.setState((prevState) => {
      prevState.list[index].selected = !prevState.list[index].selected
    });
  };

	render() {
  	return (
    	<div>
      	<Form addToList={ this.addToList } />
      	<List items={ this.state.list } 
        			toggleItem={ this.toggleSelected } />
      </div>
    )
  }
}

ReactDOM.render(<App />, mountNode);