Skip to content

Instantly share code, notes, and snippets.

@markerikson

markerikson/render-logic.js

Last active January 1, 2024 06:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markerikson/47fff93c92286db72b22bab5b02e2da3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markerikson/47fff93c92286db72b22bab5b02e2da3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. markerikson revised this gist May 22, 2021. 1 changed file with 30 additions and 22 deletions.
    52 changes: 30 additions & 22 deletions render-logic.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,23 +1,31 @@
    class ParentComponent extends Component {
    render() {
    // My basic render function structure:

    // 1) Extract values from props and state
    const {a, b, someBoolean, someList} = this.props;

    // 2) Render any dependent items into temporary variables, such as conditional components or lists
    const conditionalComponent = someBoolean ? <SomeComponent /> : null;
    const listItems = someList.map(item => <ListItem item={item} />);

    // 3) Use a single JSX structure, with the temporary variables in the correct spots.
    // Note that I avoid logic inline in my JSX. That's perfectly legal, but I prefer to
    // make the use of that logic as clear as possible by keeping it outside the JSX.
    return (
    <div>
    <div>A: {a}, B: {b}</div>
    {conditionalComponent}
    {listItems}
    </div>
    );
    }
    // See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
    // My basic render function structure:
    function RenderLogicExample({
    someBoolean, // 1) Destructure values from `props` object
    someList,
    }) {
    // 2) Declare state values
    const [a, setA] = useState(0);
    const [b, setB] = useState(0);

    // 3) Render any dependent items into temporary variables,
    // such as conditional components or lists
    const conditionalComponent = someBoolean ? (
    <SomeConditionalComponent />
    ) : null;

    const listItems = someList.map(item => (
    <ListItem key={item.id} item={item} />
    ));

    // 4) Use a single JSX structure filled with content
    return (
    <div>
    <div>
    A: {a}, B: {b}
    </div>
    {conditionalComponent}
    {listItems}
    </div>
    );
    }
  2. markerikson revised this gist Aug 31, 2016. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions render-logic.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,17 @@
    class ParentComponent extends Component {
    render() {
    // My basic render function structure:

    // 1) Extract values from props and state
    const {a, b, someBoolean, someList} = this.props;

    // 2) Render any dependent items into temporary variables, such as conditional components or lists
    const conditionalComponent = someBoolean ? <SomeComponent /> : null;
    const listItems = someList.map(item => <ListItem item={item} />);

    // 3) Use a single JSX structure, with the temporary variables in the correct spots.
    // Note that I avoid logic inline in my JSX. That's perfectly legal, but I prefer to
    // make the use of that logic as clear as possible by keeping it outside the JSX.
    return (
    <div>
    <div>A: {a}, B: {b}</div>
  3. markerikson created this gist Aug 20, 2016.
    15 changes: 15 additions & 0 deletions render-logic.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    class ParentComponent extends Component {
    render() {
    const {a, b, someBoolean, someList} = this.props;
    const conditionalComponent = someBoolean ? <SomeComponent /> : null;
    const listItems = someList.map(item => <ListItem item={item} />);

    return (
    <div>
    <div>A: {a}, B: {b}</div>
    {conditionalComponent}
    {listItems}
    </div>
    );
    }
    }