suzdalnitski

const User = ({ name, friends }) => (
  <div>
    Name: {name}
    {friends && friends.map(friend => <User key={friend.name} {...friend} />)}
  </div>
);

User.propTypes = {
  name: PropTypes.string.isRequired,
  friends: PropTypes.arrayOf(

suzdalnitski

const User = ({ name, friends }) => (
  <div>
    Name: {name}
    {friends.map(friend => (
      <User key={friend.name} {...friend} />
    ))}
  </div>
);

suzdalnitski

...

import FirstNameField from './FirstNameField';
import LastNameField from './LastNameField';

class SimpleForm extends React.Component { 
  ...

  render() {
    const { firstNameError, firstName, lastName, lastNameError } = this.state;

suzdalnitski

import React from 'react';
import TextField from './TextField';

const FirstNameField = ({...rest}) => (
  <TextField name="firstName"
              label="First name:"
              {...rest} />
);

export default FirstNameField;

suzdalnitski

import React from 'react';
import TextField from './TextField';

const LastNameField = ({...rest}) => (
    <TextField name="lastName"
                label="Last name:"
                {...rest} />
);

export default LastNameField;

suzdalnitski

...

import TextField from './TextField';

class SimpleForm extends React.Component {
  ...

  render() {
    const { firstNameError, firstName, lastName, lastNameError } = this.state;

suzdalnitski

import React from 'react'
import style from "./style";

const TextField = ({name, onChange, onBlur, error, label}) => (
  <div style={style.inputGroup}>
    <label>
      {label}
      <input
        style={style.input}
        type="text"

suzdalnitski

class SimpleForm extends React.Component {
  state = {
    ...
    lastName: "",
    lastNameError: ""
  };

  validateName = ...;

  onFirstNameBlur = ...;

suzdalnitski

import React from "react";

const Greetings = ({ firstName, lastName }) => (
    <div>
        Hey you! {firstName} {lastName}!
    </div>
);

export default Greetings;

suzdalnitski

import style from './style';

class SimpleForm extends React.Component {
    ...
    
    render() {
      const { firstNameError, firstName, lastName } = this.state;
  
      return (
        <div style={style.form}>