Show/hide of components not working even when the store is updated

Question

I have a page which is divided into 3 components in this I search address and show hidden components below with data

class SignPage extends Component {
constructor(props) {
    super(props);
}
render() {
const {showChild} = this.props;
return (
    <div className="container-fluid">
        <div className="row">
            <div className="col-md-12 col-md-offset-12">
                <Search />
            </div>
        </div>
        <br/>
        <div className="row">
            <div className="col-md-4 col-md-offset-4"> 
                {this.props.show && <Signform showChild{showChild}/>}
            </div>
            <div className="col-md-8 col-md-offset-8">
                {this.props.show && <ContractWriter/> }
            </div>
        </div> 
    </div>
)}
}

const mapStoreToProps = (store) => {return {main: store.main}}

export default connect(mapStoreToProps, {showChild}(SignPage)

the code for my Search component is

class SearchComponent extends Component {
constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
}

onChange (e){
    this.setState({[e.target.name]: e.target.value});
}
onSubmit (e){
    e.preventDefault();
    var display;
    var outcome;
    var conf = contract(Mycont)
    conf.setProvider(this.state.web3.currentProvider)
    conf.at(this.state.contaddress)
    .then((instance) => {conf = instance
        return conf.get()
    })
    .then((result) => {console.log(result)
                        display = true
                        outcome = result
                        console.log(this.state.show)})
    .then(() => this.props.dispatch(showChild(outcome, display)))
}

render() {
    return (
        <div className="input-group">
            <input type="BigNumber" 
                    className="form-control" 
                    placeholder="Enter address..."
                    value = {this.state.contaddress}
                    onChange = {this.onChange}
                    name = "contaddress"/>
            <span className="input-group-btn">
                <button className="btn btn-default" 
                    onClick = {this.onSubmit}
                    type="button">
                    Search Contract
                </button>
            </span>
            <br/>
        </div>
    )
}
 }

 const mapStoreToProps = (store) => {
return {
    main: store.main
}
 }

my action is

export function showChild(result, show) {
    return {
      type: "SHOW_CHILD",
      payload: {
          result        : result,
          show          : show
     }
   }
 }

and reducer is

module.exports = {
main: (state={
   b  : null,
   c  : null,
   d  : null,
   e  : null,
   result : null,
   show   : true
 }, action) => {case 'SHOW_CHILD':
    return {
      ...state,
      result : action.payload.result,
      show   : action.payload.show
    }

now even though my store gets updated with result and show as true but my UI does not reflect anything...My hidden components are not showing and fields are not getting updated.

I am new to react and redux. Any help is very much appreciated

Answer 1

You seem to be referencing this.props.show but in your mapStoreToProps you're not passing show into your component. Might want to use this.props.main.show instead :)