React-sortable-tree: Can you make <buttons> inside of generateNodeProps display conditionally?

[NickEmpetvee]

Hi guys. Suppose we have code like the below. If we always want button 1 to display but only want button 2 to display if a certain condition is fulfilled (e.g. if title = 'show two buttons'), how would we accomplish that?

        generateNodeProps={rowInfo => ({
          buttons: [
            <button
              onClick={() => doSomething()}
            >
              1
            </button>,
           <button
              onClick={() => doSomething()}
            >
              2
            </button>
           ],

[nreis11]

You can use the Inline If with Logical && Operator for this.

    <SortableTree
      treeData={this.state.treeData}
      onChange={treeData => this.setState({ treeData })}
      generateNodeProps={rowInfo => ({
        buttons: [
          <button
            onClick={() => doSomething()}

            1
        </button>,
          someCondition && <button
            onClick={() => doSomething()}

            2
        </button>
        ]
      })
      }
    />

[NickEmpetvee]

@nreis11
Thank you. What would be the conditional syntax? When I do the below I get a "Unexpected token, expected ," syntax error:

                {treeIndex != 0 && <button
                  onClick={() =>
                    this.setState(state => ({
                      treeData: removeNodeAtPath({
                        treeData: state.treeData,
                        path,
                        getNodeKey,
                      }),
                    }))
                  }
                >
                  -
                </button>}

[NickEmpetvee]

This is resolved. The below code works:

                treeIndex > 0 &&
                <button...>...</button>

It looks like the {} confused JSX so I removed them. Thanks @nreis11 .