I've Tried this code on your snippet and it is working good -
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park"
},
{
key: "2",
name: "Carl Green",
age: 42,
address: "London No. 1 Lake Park"
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
name: "Jim Red",
age: 32,
address: "London No. 2 Lake Park"
}
];
class App extends React.Component {
state = {
filteredInfo: null,
sortedInfo: null
};
handleChange = (pagination, filters, sorter) => {
console.log("Various parameters", pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter
});
};
clearFilters = () => {
this.setState({ filteredInfo: null });
};
clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null
});
};
setAgeSort = () => {
this.setState({
sortedInfo: {
order: "descend",
columnKey: "age"
}
});
};
render() {
let { sortedInfo } = this.state;
sortedInfo = sortedInfo || {};
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
sorter: (a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0),
sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
ellipsis: true
},
{
title: "Age",
dataIndex: "age",
key: "age",
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === "age" && sortedInfo.order,
ellipsis: true
},
{
title: "Address",
dataIndex: "address",
key: "address",
sorter: (a,b) => (a.address > b.address) ? 1 : ((b.address > a.address) ? -1 : 0),
sortOrder: sortedInfo.columnKey === "address" && sortedInfo.order,
ellipsis: true
}
];
return (
<>
<Table
columns={columns}
dataSource={data}
onChange={this.handleChange}
/>
</>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
<!-- 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>
<!-- end snippet -->
React circa 2020
----------------
In the `onClick` callback, call the [state hook's][1] setter function to update the state and re-render:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const Search = () => {
const [showResults, setShowResults] = React.useState(false)
const onClick = () => setShowResults(true)
return (
<div>
<input type="submit" value="Search" onClick={onClick} />
{ showResults ? <Results /> : null }
</div>
)
}
const Results = () => (
<div id="results" className="search-results">
Some Results
</div>
)
ReactDOM.render(<Search />, document.querySelector("#container"))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][2]
React circa 2014
----------------
The key is to update the state of the component in the click handler using `setState`. When the state changes get applied, the `render` method gets called again with the new state:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][3]
[1]: https://reactjs.org/docs/hooks-state.html
[2]: https://jsfiddle.net/khx30pnv/
[3]: http://jsfiddle.net/kb3gN/15084/
