Use `state activeId and display innertable`. This is working example.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const data = [
{
name: "Rama singh1",
noc: "noc1",
final: "final1",
today: "today1",
upto: "upto1"
},
{
name: "Rama singh2",
noc: "noc2",
final: "final2",
today: "today2",
upto: "upto2"
},
{
name: "Rama singh3",
noc: "noc3",
final: "final3",
today: "today3",
upto: "upto3"
},
{
name: "Rama singh4",
noc: "noc4",
final: "final4",
today: "today4",
upto: "upto4"
}
];
const JobsTable = props => (
<div className="table-responsive">
<table className="table table-hover" id="dashboard">
<thead>
<tr className="text-center">
<th scope="col">Technology</th>
<th scope="col">Total Resumes</th>
<th scope="col">Job Title</th>
<th scope="col">Total Score</th>
<th scope="col">Average Score</th>
</tr>
</thead>
<tbody />
</table>
</div>
);
const Tableone = props => (
<div className="row">
<div className="col-12">
<div className="table-responsive">
<table className="table table-hover" id="dashboard">
<thead>
<tr className="text-center">
<th />
<th scope="col">Recruiter Name</th>
<th scope="col">Number of ID</th>
<th scope="col">Yesterday's Final Score</th>
<th scope="col">Score added today</th>
<th scope="col">Updo Date Final Score</th>
</tr>
</thead>
<tbody className="text-center">
{props.data &&
props.data.length > 0 &&
props.data.map((item, key) => {
return (
<React.Fragment key={key}>
<tr key={key} onClick={() => props.clickHandler(key)}>
<td align="center">
<input type="checkbox" />
</td>
<td>{item.name}</td>
<td className="font-weight-bold">{item.noc}</td>
<td>{item.final}</td>
<td className="font-weight-bold">{item.today}</td>
<td className="font-weight-bold">{item.upto}</td>
</tr>
{props.activeId === key ? (
<tr>
<JobsTable />
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
</table>
</div>
</div>
</div>
);
class App extends React.Component {
state = {
activeId: ""
};
clickHandler = id => {
if (id === this.state.activeId) this.setState({ activeId: "" });
else this.setState({ activeId: id });
};
render() {
return (
<Tableone
data={data}
activeId={this.state.activeId}
clickHandler={this.clickHandler}
/>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
<!-- language: lang-html -->
<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' />
<!-- end snippet -->
That's *property spread notation*. It was added in ES2018, but long-supported in React projects via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<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>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
