Table.Column not updating label prop when it's updated.

[merisbahti]

Bug report 🐞

Version & Environment

• Chrome latest
• Version of zeit-ui/react: ^1.8.0-canary.0

Expection

When using a table like this:

() => {
  const data = [
    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },
    { property: 'Component', description: 'DOM element to use', type: 'string', default: '-' },
    { property: 'bold', description: 'Bold style', type: 'boolean', default: 'true' },
  ]
  const [state, setState] = React.useState(0)
  React.useEffect(() => {
    const interval = setInterval(() => {
      setState((old) => old + 1)
    }, 1000)
    return () => {
      clearInterval(interval)
    }
  }, [])
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label={`description: ${state}`} />
      <Table.Column prop="type" label="type" />
      <Table.Column prop="default" label="default" />
    </Table>
  )
}

The description label prop is not being updated. This is a "minimal" reproducable example, I'm not doing exactly this in my application.

Actual results (or Errors)

The description label prop isn't being updated, even though the variable state is being updated.

[unix]

@merisbahti The pre-release version v1.8.0-canary.9 is out now, it should solve this issue.

[merisbahti]

Interesting, thanks. In a way, it does solve the issue, however it's not super obvious to me.

For example, this still does not work:

() => {
  const data = [
    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },
    { property: 'Component', description: 'DOM element to use', type: 'string', default: '-' },
    { property: 'bold', description: 'Bold style', type: 'boolean', default: 'true' },
  ]
  const [state, setState] = React.useState(0)
  React.useEffect(() => {
    const interval = setInterval(() => {
      setState((old) => old + 1)
    }, 1000)
    return () => {
      clearInterval(interval)
    }
  }, [])
  return (
    <Table data={data}>
      <Table.Column prop="description">
        Description: {state}
      </Table.Column>
    </Table>
  )
}

However, if you stringify the state in the label, like this:

      <Table.Column prop="description" label={state}>
        Description: {state}
      </Table.Column>

it updates as expected. Is this expected?

[unix]

Sorry, this is my negligence.
I created an online example using version 1.8.0-canary.10, the table children should be sync correctly now.