StateRouter for rendering one or more children where `state` is found in the`path` prop.

MyComponent.js

// Example component using StateRouter

const MyComponent = () => {               
  const [state] = useMachine(myMachine);
  
  return (
    <StateRouter state={state}>
      <Loading path="loading" />
      <Ready path="ready" />
      <Error path="error" />
    </StateRouter>
  );
};

StateRouter.js

export const StateRouter = ({ state, children }) => {         

  const elements = React.Children.toArray(children);
  const filteredChildren = elements.reduce((arr, child) => {
    const { path = '' } = child.props;

    return path
      .split(' ')
      .includes(state)
      ? [...arr, child]
      : arr;
  }, []);

  if (filteredChildren.length) {
    return filteredChildren;
  }

  throw new Error(`No routes not found for ${state}`);
};