enactjs/Lobby

@webOS101 Sorry for late response.
Let me show you how I use the I18nDecorator：

// App.tsx

interface AppProps {
  id: string;
}

class App extends React.Component<AppProps> {
  render() {
    return (
      <div className='app'>
        <Member id={this.props.id} />
      </div>
    );
  }
}

const mapStateToProps = (rootState: RootState) => {
  const state = rootState.app;
  return {
    id: state.id,
  };
};

export default connect(mapStateToProps)(I18nDecorator(App));

// Member.tsx

interface MemberProps {
  initial: () => void;
}

class Member extends React.Component<MemberProps> {
componentDidMount() {
    const { initial } = this.props;
    initial();
  }

  render() {
    return (
      <div className='member-container'>
        <Logo />
        <Container1 height='430px'>
          <Step step='1' />
          <div>
            <Step1Content />
          </div>
        </Container1>
        <Container2 height='267px'>
          <Step step='2' />
          <div>
            <Step2Content />
          </div>
        </Container2>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  initial: () => dispatch(initial()),
});

export default connect(
  null,
  mapDispatchToProps
)(Member);

//Container1.tsx

interface Container1Props {
  height: string;
  children: React.ReactNode;
}

const Container1 = (props: Container1Props) => (
  <div className="container-1" style={{ height: props.height }}>
    {props.children}
  </div>
);

export default Container1;

// Step1Content.tsx

const Step1Content = (props: any) => {
  return (
    <div className='step-1-content-container'>
      <div>{$L('member.someText')}</div>
      <div style={{ fontSize: '36px', fontWeight: 'bold' }}>
        {$L('member.someText2')}
      </div>
      <div>{$L('member.someText3')}</div>
      <div>{$L('member.someText4')}</div>
    </div>
  );
};

export default Step1Content;

Step2Content is just like Step1Content