export class A extends Component { constructor(props) { super(props) this.state = { collapse: false, divWidth: { width: 700, } } this.toggle = this.toggle.bind(this); } toggle() { this.setState(state => ({ collapse: !state.collapse })); } render() { const data = [{ name: 'Ayaan', age: 26 }, { name: 'Ahana', age: 22 }] const columns = [{ Header: 'Name', accessor: 'name' }, { Header: 'Age', accessor: 'age' }] return ( <div> <Button onClick={this.toggle} > Click Button </Button> <Modal isOpen={this.state.collapse} modalClassName={this.state.divWidth}> <ModalHeader>Welcome</ModalHeader> <ModalBody> <div className="form-group"> <div> <ReactTable data={data} columns={columns} defaultPageSize={2} /> </div> </div> </ModalBody> </Modal> </div> ) } }
In above code I am not able to increase width of modal(from reactstrap),we can increase width only till 500px. I have added css property in state named divWidth where I am increasing width to 700 but still it does not work.