Text strings must be rendered within a <Text> component

[surajmdl]

I am getting some kind of error while using this component. Kindly see the screenshot for error detail. Below is the code which I'm using.

--------Installed Component-------------
npm install react-table-6
-------------------Below is the code-----------------------------------------------
`import React, {Component} from 'react';
import ReactTable from 'react-table-6';

;

export default class DataTable3 extends Component {
render() {
const data = [
{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
},
},
{
name: 'Suraj Kumar',
age: 28,
friend: {
name: 'Rohit K',
age: 25,
},
},
];

const columns = [
  {
    Header: 'Name',
    accessor: 'name', // String-based value accessors!
  },
  {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className="number">{props.value}</span>, // Custom cell components!
  },
  {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name, // Custom value accessors!
  },
  {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age',
  },
];

return <ReactTable data={data} columns={columns} />;

}
}
`

[tannerlinsley]

Looks like you're using react-native, in which case you will need to override the default Cell renderer for your tables to use the Text component wrapper.

[TreyBCollier]

Did anybody find a solution to this?

[skychavda]

Is anybody resolve this issue? Cause currently, I am facing this one

[Julio-de-Leon]

Anyone who managed to resolve this issue?

[Michota]

I love the fact that two years have passed and noone answered

[tannerlinsley]

While on our backlog, React Native support simply isn't requested enough to take priority over the massive efforts we're putting into other areas (reactivity, tree-shaking, general API improvements). If anyone here has the desire to help out (in a significant way) on a React Native adapter or utilities, please let us know!

[cengit]

maybe you should use this one for react-native table: https://github.com/meliorence/react-native-render-html

[TomOMara]

Posted a basic example with sorting here - hope it helps someone!

[ivanandresdiaz]

I found this solution.
The problem is with Method flexRender. So, i try to render it by myself and not use the method.for now, it is working good, We'll see.

this is for the body

{table.getRowModel().rows.map((row) => (
            <View key={row.id} style={{ flexDirection: "row" }}>
              {row.getVisibleCells().map((cell) => {
                const context = cell.getContext(); // my way
                const value = context.getValue() as any;// my way
                return (
                  <View key={cell.id} style={{ flexDirection: "row" }}>
                    <Text>{value ? value : ""}</Text>
                    {/* {flexRender( // Comented
                      cell.column.columnDef.cell,
                      cell.getContext()
                    )} */}
                  </View>
                );
              })}
            </View>
          ))}

this is for the header

    ```  {table.getHeaderGroups().map((headerGroup) => (
        <View key={headerGroup.id} style={{ flexDirection: "row" }}>
          {headerGroup.headers.map((header) => {
            const value = header.id
            return (
              <View key={header.id} style={{ flexDirection: "row" }}>
                <Text>{value}</Text>
                {/* {!header.isPlaceholder &&
                  flexRender(
                    <Text>{header.column.columnDef.header}</Text>,
                    header.getContext()
                  )} */}
              </View>
            );
          })}```