function Child({ routes }, props) {

  return (

    <div>{props.value}</div>        /*This is empty*/
  )
}

function Parent() {
  const [isOpen, setOpen] = useState({
    isOpen: false
  });

  const handleClick = e => {
    e.preventDefault();
    setOpen(isOpen => !isOpen);

    if(isOpen === true) {
      const openMenu = 'open';
      return <Child value={openMenu}/>;
    }
    else {
      const openMenu = 'close';
      return <Child value={openMenu} />
    }

  };
}

function Child(props) {
  return (
    <div>{props.value}</div>
  )
}

function Child({ routes, ...props }) {
  return (
    <div>{props.value}</div>
  )
}

// suppose props = { val1, val2, val3 }

const Parent = (props) => <Child {...props} />

// in such case you can destructure the values in the paranthesis itself,

const child = ({ val1, val2, val3 }) => {
 <div>
  <div>{val1 && val1}</div>
  <div>{val2 && val2}</div>
  <div>{val3 && val3}</div>
 <div>
}


// which is same as,

const child = (props) => {
 const { val1, val2, val3 } = props
 //rest of the code..
}

class Parent extends Component {
 // ..
function1 = () => {..}

function2 = () => {..}

 render () {

 //suppose this.props = { match, dispatch, ..}
 const object1 = ..
 const object2 = ..

  return <Child {...{ function1, function2, object1, object2}} {...this.props} />
}

const Child = ({
 function1,
 function2,
 object1,
 object2,
 match,
 dispatch,
 }) => {
  return (
   <div> .. </div>
}