The way I solved this is by making async api call within the yup validation. yup provide a 'test' which you can use as follows.
```
username: yup
.string()
.required('username is required')
.test('checkIfTaken',
'user name is taken, try something else',
function (value) {
//if cur value is empty its not allowed
if (value === "") return true;
//make api call to check if username is taken
//using fetch etc. here we are just using timeout
//api example: fetch(`{baseURI}/checkDuplicate?username=${value}`).then(....)
return new Promise((resolve, reject) => {
const randomInt = generateRandomInt();
setTimeout(() => {
if (randomInt % 2 == 0) {
resolve(true);
} else {
resolve(false)
}
}, 1000);
})
}),
```
Below is the example which passes value on onClick event.
I used es6 syntax. remember in class component arrow function does not bind automatically, so explicitly binding in constructor.
class HeaderRows extends React.Component {
constructor(props) {
super(props);
this.handleSort = this.handleSort.bind(this);
}
handleSort(value) {
console.log(value);
}
render() {
return(
<tr>
{this.props.defaultColumns.map( (column, index) =>
<th value={ column }
key={ index }
onClick={ () => this.handleSort(event.target.value) }>
{ column }
</th>
)}
{this.props.externalColumns.map((column, index) =>
<th value ={ column[0] }
key={ index }>
{column[0]}
</th>
)}
</tr>
);
}
}
