Question 207264 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – header disappears after a split second

below is my code

I have an AppMdal Component where i need to show the header when both catSelected and noDocs are true.

For some reason, It works as expected but when the header is not supposed to show , it appears for a split second and then disappears. How do i stop that ?

ADD_DOC is an array of items. I made sure that that’s always there. There’s no other CSS rules that might cause the issue

class AppModal extends Component {
    static propTypes = {
        noDocs :this.propTypes.bool
    };

    constructor(props) {
        super(props);
        this.state = {
            catSelected: false
        }
    }

    onChange= value => {
        this.setState({
            catSelected: true
        })
    }

    render() {
        const header = (
            <div>
                {
                    this.state.catSelected && this.props.noDocs && (
                        <p>
                            selected req don't apply
                        </p>
                    )
                }
            </div>
        );

        return (
            <Modal
                header={header}>
                <form>
                    {ADD_DOC.map(item => (
                        <Row>
                            <Col>
                            <Field>
                                component={input}
                                onChange={(e, val) => this.onChange(val)}
                            </Field>
                            </Col>
                        </Row>
                    ))}
                </form>
            </Modal>
        )
    }
}

const mapStateToProps = (state, props) => {
const initialValues={
noDocs = true
}
    let noDocs = formValueSelector('addDoc')(state, 'noDocs');
    noDocs = !!noDocs
    return {
        noDocs
    };
}; 

export default connect(mapStateToProps) {
    reduxForm()(AppModal)
}

I cannot get my head around why the header appears and disappears for a split second. How do i avoid it. header should show only when this.state.catSelected && this.props.noDocs is true.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Answer from Nazrul Chowdhury works but the message shows on the initial view which i don't want.

    I have observed that there is 'initialValues' for 'noDocs' redux state value set in my mapStateToProps.

    when i set noDocs to false in initialValues, i was able to stop appearing and disappearing the header.

    below also fixed the issue

    const initialValues = {
noDocs = false 
}

  2. 0

    Initialize catSelected in the component’s state to true instead of false. This will prevent the header from being shown initially.

    constructor(props) {
  super(props)
  this.state = {
    catSelected: true
  }
}

    Update the onChange method to set catSelected based on the value parameter. This ensures that catSelected is updated correctly when the value changes.

    onChange = value => {
  this.setState({
    catSelected: !!value
  })
}

    Render the header only when both catSelected and noDocs are true, which prevents it from briefly appearing and disappearing.

    render() {
  const header =
    this.state.catSelected && this.props.noDocs ? (
      <div>
        <p>selected req don't apply</p>
      </div>
    ) : null

  // Rest of your code...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search