import React from 'react'
import './user.css'
const User = ({ id, email, name, onDelete }) => {
const handleDelete = () => {
onDelete(id);
}
return (
<table className='table'>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>{name}</td>
<td>{email}</td>
<td>
<button>edit</button>
<button onClick={handleDelete}>delete</button>
</td>
</tr>
</tbody>
</table>
)
}
export default User
You're creating a new table for every user. That's why your headers are duplicated. You only need a new row for every user instead of an entire table for each user.
I'd separate the UserTable and the UserRow.
// UserTable.jsx
import React from 'react'
import './user.css'
import './UserRow'
const UserTable = ({ users, onDelete }) => {
return (
<table className='table'>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
{users.map(user => {
<UserRow key={user.id} userId={user.id} userName={user.name} email {user.email} onDelete={onDelete} />onDelete={onDelete} />
})
}
</tbody>
</table>
)
}
export default UserTable
// UserRow.jsx
import React from 'react'
import './user.css'
const UserRow = ({ userId, email, userName, onDelete }) => {
const handleDelete = () => {
onDelete(userId);
}
return (
<tr>
<td>{userName}</td>
<td>{email}</td>
<td>
<button>edit</button>
<button onClick={handleDelete}>delete</button>
</td>
</tr>
)
}
export default UserRow
My code is really simple and I checked everything but this is getting this error repeatedly. Please suggest to me what can i change. I tried using but that dint work.I even checked other answers but they dint work.
import React from "react";
import { Button, Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Employees from "./Employees";
const Home = () => {
return (
<>
<div>
<Table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{Employees && Employees > 0 ? Employees.map((item) => {
return (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
);
})
: "No data available"}
</tbody>
</Table>
</div>
</>
);
};
export default Home;
If there is no data your table would look like
<table>
<tbody>
No data available
</tbody>
</table>
It needs to have a <tr> and a <td>
I am trying to make a video play-able model when click on the video link but can't understand what to do. Tried my best but can't reach at solution. I have picked a logic from internet but didn't work. I have also commented out the section of modal.Thanks in Advance...
code ................................................................
import React,{useState, useEffect } from "react";
import './App.css';
import Axios from "axios";
import ModalVideo from 'react-modal-video';///
function App() {
const [isOpen, setOpen] = useState(false)///
const [resdata, setresdata] = useState([])
const showurl = 'http://localhost/react%20project/newapp/src/show.php?function=show';
const updtcomp = () => {
Axios.get(showurl)
.then(res =>{
setresdata(res.data)
console.log(res)
})
.catch(err => {
console.log(err)
})
}
useEffect(() => {
Axios.get(showurl)
.then(res =>{
setresdata(res.data)
console.log(res)
})
.catch(err => {
console.log(err)
})
}, [])
console.log(resdata)
return(
<div className="App"><br/>
<div className="tblfrm">
<table>
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Date</td>
<td>V-Links</td>
<td>Action</td>
</tr>
</thead>
<tbody>
{ resdata.length > 0 && resdata.map( resdata => (
<tr>
<td key={resdata.Id}>{resdata.Id}</td>
<td key={resdata.Name}>{resdata.Name}</td>
<td key={resdata.date}>{resdata.date}</td>
{/* trying to make a video playable modal on click of the link */}
<td key={resdata.video}>
<a onClick={()=> setOpen(true)} href={resdata.video}>
{resdata.video} </a>
<ModalVideo isOpen={isOpen} onClose={()=> setOpen(false)}/>
</td>
<td>
<button>EDIT</button>
<button>DELETE</button>
</td>
</tr>
) ) }
</tbody>
</table>
</div>
</div>
)
}
export default App;
I make it different by using button because it was complicated for me to do..
<button onClick={()=>setModalIsOpen(true)}> VIEW </button>
<Modal isOpen={modalIsOpen}>
<ReactPlayer controls
width="90%"
height="calc(90vh - 90px)"
url={resdata.video}
/>
</Modal>
I'm trying to display key-value pairs in react js,
but somehow I cannot display them properly. I have created a table widget and I am not getting the right display
My table Widget
import React from "react";
function Table(props) {
const { tablevalue } = props;
console.log(tablevalue);
return (
<div className="table">
<table className="table table-hover">
<tbody>
{tablevalue.map((item, value) =>
Object.entries(item, (key, value) => {
return (
<tr className="table-row">
<th scope="col" key={`tablevalue-${key}`}>
{key}
</th>
<td key={`tablevalue-${value}`}>{value}</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
);
}
export default Table;
app.js
import React, { Fragment } from "react";
import Dropdown from './components/widgets/Dropdown/index'
import Table from './components/widgets/Table/index'
function DropdownTest() {
return (
<h3>
<b>Profit</b>
</h3>
<br />
<Table
tablevalue = {[{key:'Binance' , value: 'Polonix'}, {key:'Profit' , value:'Loss'}]}
/>
</div>
);
}
export default DropdownTest;
My output
Whereas I want my output to be displayed in terms of table
You can use table header
<tbody>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
{tablevalue.map(({ key, value }) => (
<tr className="table-row">
<td key={`tablevalue-${key}`}>{key}</td>
<td key={`tablevalue-${value}`}>{value}</td>
</tr>
))}
</tbody>
Code
const Table = ({ tablevalue }) => (
<div className="table">
<table className="table table-hover">
<tbody>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
{tablevalue.map(({ key, value }) => (
<tr className="table-row">
<td key={`tablevalue-${key}`}>{key}</td>
<td key={`tablevalue-${value}`}>{value}</td>
</tr>
))}
</tbody>
</table>
</div>
);
const DropdownTest = () => (
<div>
<h3>
<b>Profit</b>
</h3>
<br />
<Table
tablevalue={[
{ key: "Binance", value: "Polonix" },
{ key: "Profit", value: "Loss" }
]}
/>
</div>
);
ReactDOM.render(
<React.StrictMode>
<DropdownTest />
</React.StrictMode>,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I've not seen Object.entries used this way. I would usually use a forEach on it:
Object.entries(item).forEach(entry => {
let key = entry[0];
let value = entry[1];
});
Though a little bit more performant would be using a for in instead, as Object.entries creates a brand new array then forEach iterates through that, which is unnecessary:
for (const key in item) {
let value = obj[key];
}
You can do it this way:
import React from "react";
export default props => {
console.log(props.tablevalue);
const ths = props.tablevalue.map(({ key, value }) => (
<th key={value}>{key}</th>
));
const values = props.tablevalue.map(obj => <td>{obj.value}</td>);
return (
<>
<table>
<tr>{ths}</tr>
<tr>{values}</tr>
</table>
</>
);
};
Here's a stackblitz that displays the table.
Ultimately it all comes down to how you want that table to be displayed, you can tweak some things as you want.
I think you have to create a header separately. and after that loop thought the data and apply css for table row. please find the below code.
import React from 'react';
import './index.css';
function Table(props) {
const {
tablevalue,
} = props
console.log(tablevalue)
return (
<div className="table">
<table className="table table-hover">
<tbody>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
{tablevalue.map((item, value) => {
return (
<tr className="table-row">
<td key={`tablevalue-${value}`}>{item.key}</td>
<td key={`tablevalue-${value}`}>{item.value}</td>
</tr>
)
})}
</tbody>
</table>
</div>
)
}
export default Table;
Check this sandbox: https://codesandbox.io/s/goofy-breeze-fdcdr
Object.keys(tablevalue[0]).map((key) => {key}). You can use this in header tr and loop over it then
Change the Table component to something like this:
import React from "react";
function Table(props) {
const { tablevalue } = props;
return (
<div className="table">
<table className="table table-hover">
<tbody>
<tr>
{Object.keys(tablevalue[0]).map(key => (
<th key={key}>{key}</th>
))}
</tr>
{tablevalue.map(({ key, value }) => (
<tr className="table-row" key={`tablevalue-${key}`}>
<td>{key}</td>
<td>{value}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default Table;
I have a component in react where I pass so data in a prop:
<Mycomponent names={[{name: 'peter'},{name: 'pan'}]} />
Then I have a component which has a table and where I want to display the data in a
Here is the component
import React from 'react';
const Mycomponent = (props) => <div>
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{ props.names }</td>
</tr>
</tbody>
</table>
</div>;
export default Mycomponent;
How do I loop and display each name in a <tr><td>{props.names.name}</td></tr> ?
<tbody>
{
props.names.map( ({name}, i) => <tr key={i}><td>{ name }</td></tr> )
}
</tbody>
will iterate over all of props.names and return a tr for each