how to get output of table on page in reactjs

Question

I create a table I get data from the database using the backend I just want to show the output of the table on the page the output will not be visible

This is the code of my table.js

//import Data from './TextForm';

function Table(props) {
    console.log('type ', typeof (props.Data));
    console.log('data ', props.Data)
    return (
        <table>
            <thead>
                <tr>
                    <th>Text No</th>
                    <th>TextArea</th>
                </tr>
            </thead>
            <tbody>
                {props.Data ?
                    Object.entries(props.Data).map((key,value)=> {
                        console.log('Key',key);
                        {
                            <tr key={value}>
                                <td>{key.textId}</td>
                                <td>{key.textArea}</td>

                            </tr>
                        }
                    })
                    : null
                }
            </tbody>
        </table>

    )
}
export default Table;

this is props. data where I get the data and define prop. data I get data from the backend I connected the frontend for getting and storing data

Edit

function TextForm(props) {
    const [text, setText] = useState('');
    const [submittext,setsubmittext]=useState(null);
    const [Data,setData]=useState([]);

    const handleOnClickUpperCase = () => {
        var newText = text.toUpperCase();
        setText(newText);
    }
    const handleOnClickLowerCase = () => {
        var newText = text.toLowerCase();
        setText(newText);
    }

    const handleOnChange = (e) => {
        setText(e.target.value);
    }
    

    const handleOnPreview = (e) => {
        e.preventDefault();
        setsubmittext(text);
        // console.log(text);
        const ROOT_URL='https://localhost:7113/';
        var formData={
            Textarea:text
        }
        axios.post(`${ROOT_URL}api/demo-text`, formData, {
            headers: {"Access-Control-Allow-Origin": "*",  'Content-Type': 'application/json'} 
        })
        .then(function (response) {
            console.log('successs')
            //handle success
            
            setData(response);
            console.log('response ',Data);
        })
        .catch(function (response) {
            console.log('error')
            //handle error
            console.log(response);
        })   
    }
    return (
        <>
           
            <div className="container">
                <h1>{props.title}</h1>
                <p>Enter Text Here:</p>
                <div className="mb-3">
                    <textarea className="form-control" value={text} onChange={handleOnChange} id="mybox" rows="8"></textarea>
                </div>
                 <Table Data={Data} />
                {text === text.toLowerCase() ? <button className="btn btn-primary" onClick={handleOnClickUpperCase}>Convert to Upper Case</button> : <button className="btn btn-primary" onClick={handleOnClickLowerCase}>Convert to Lower Case</button>}
                <button className="btn btn-primary mx-3" onClick={handleOnPreview}>submit</button>
            </div>
            <hr></hr>
            <div className="container my-4" >
                <h1>{props.sum}</h1>
                <p>Text Word {text.split(" ").length} and Character is {text.length}</p>
                <p>{0.008 * text.split(" ").length} Minutes to Read</p>
            </div>
            <hr></hr>
            <div className="container my-4">
                <h2>Preview Your Text</h2>
                <p>{submittext}</p>
            </div>

        </>
    )
}

the output of prop.data

Please, provide more details because it is not clear where is the problem. — Mina
– Mina, Commented Jul 1, 2022 at 7:10
@gouravkumar, So please provide a sample of prop.Data, so we can do debugging. — Mina
– Mina, Commented Jul 1, 2022 at 7:16

Kanti vekariya · Accepted Answer · 2022-07-01 08:14:43Z

1

here have iterator objects array so pls try the following the code see I created an example as your same array object as you shared img pls find an example here link.

import React from "react";
import ReactDOM from "react-dom";

const Data = {
  data: {
    result: [
      { textId: 1, textarea: "test" },
      { textId: 2, textarea: "1234" },
      { textId: 3, textarea: null },
      { textId: 4, textarea: null },
    ]
  }
};

function Table(props) {
  console.log("type ", typeof props.Data);
  console.log("data ", props.Data);
  return (
    <table>
      <thead>
        <tr>
          <th>Text No</th>
          <th>TextArea</th>
        </tr>
      </thead>
      <tbody>
        {props?.Data?.data?.result?.map((item) => (
          <>
            <tr key={item.textId}>
              <td>{item.textId}</td>
              <td>{item.textarea}</td>
            </tr>
          </>
        ))}
      </tbody>
    </table>
  );
}


function App() {
  return (
    <>
      <Table Data={Data} />
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

edited Jul 1, 2022 at 8:14

answered Jul 1, 2022 at 7:54

Kanti vekariya

6974 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gourav kumar Over a year ago

It will work and another issue when I use the project this output will show when I click on submit button but I want it will show without clicking on submit button

Kanti vekariya Over a year ago

call API in useEffect hooks

Mina · Accepted Answer · 2022-07-01 07:47:28Z

0

So you have to iterate over props.Data.data.result instead of props.Data, You don't need the Object.entries(), and make the initial value of the Data = {} instead of [].

const [Data, setData] = useState({});

In the conditional JSX code, you need to check if the object has keys or not, and you don't need Object.entries method, just go with props.Data.data.result.map(), Also you have to return tr from the map method as @Usama mentioned.

         {Object.keys(props.Data).length ?
                props.Data.data.result.map((key,value)=> {
                    return (<tr key={value}>
                            <td>{key.textId}</td>
                            <td>{key.textArea}</td>

                        </tr>)
                    
                })
                : null
            }

edited Jul 1, 2022 at 7:47

answered Jul 1, 2022 at 7:33

Mina

17.8k3 gold badges24 silver badges39 bronze badges

6 Comments

gourav kumar Over a year ago

this error occur Uncaught TypeError: props.Data.data is undefined

Mina Over a year ago

Yes, also I think, you need to set initial value of the Data = {} instead of [] const [Data,setData]=useState({});, also in the condition in the JSX code, you need to check if the object has a keys or not, Object.keys(props.Data).length ? ... : null

gourav kumar Over a year ago

yes object has a key i recently checked that

gourav kumar Over a year ago

when i use {} instead of [] data doesn't get from database it show empty

Mina Over a year ago

it is just an initial value it shouldn't affect anything related to resetting it.

|

Collectives™ on Stack Overflow

how to get output of table on page in reactjs

Edit

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related