2

I need to disable PostList component in its initial state.

import React from 'react';
import PostList from './PostList';

const App = () => {
    return (
        <div className="ui container">
             <PostList />
        </div>
    );
};

export default App;

Whats the best way to disable (and grey out) a component? Possible solutions are to pass a value as props and then apply it to a ui element, However please keep in mind that PostList may have inner nested components as well. Please share an example.

Improve this question

2 Answers 2

Reset to default
7

Since you mentioned in a comment that instead of hiding it, you want to grey it instead. I would use the disabled state and style the component. Since PostList could be nested, we don't know what the props are since you did not specify them.

Also, I assuming that you are not using styled-components.

import React, { useState } from "react";
import PostList from "./PostList";

const App = () => {
  const [disabled, setDisabled] = useState(true);

  return (
    <div className="ui container">
      <PostList
        style={{
          opacity: disabled ? 0.25 : 1,
          pointerEvents: disabled ? "none" : "initial"
        }}
      />
    </div>
  );
};

export default App;
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

What do you mean by styled-components? Sorry learning reactjs and still a rookie reactjs dev.
@Ahmed This library here. It is quite a popular library used in React to style components.
oh no no :D I havent used it at all. Infact hearing about it the first time.
Ill check that out. My current challenge here is that I am not sure what useState does. So ill read up on that.
useState is a new addition called hooks introduced in React v16.8
|
0

There are 2 different ways I like to do something like this.

One way you can do it is by using state 

this.state = {
  showList: false
}

and than something like 

return (
   {this.state.showList && <PostList />}
)

Another option is to pass the showList in state as a prop, so something like

return(
<PostList show = {this.state.showList} />

)

and than in PostList something like

return props.show && (your component here)

You can also use conditional classNames, so if you want that component shown, you can throw a className and style it how you normally would, but if not, just throw a display: none. I usually save doing that for replacing a navbar with a dropdown button on smaller screens, but it is another option

Improve this answer

5 Comments

Sorry I am very new to JS world. When you write the following line: return ( {this.state.showList && <PostList />} ) How does this exactly work?
If this.state.showList is true, it will render the <PostList /> component, otherwise it will just remove it from the DOM.
So the expression this.state.showList && (your component) is just a Boolean. You can play around with this a little bit, but if you console.log(true && "Hello world"), Hello world will print. If the first expression evaluates to a Boolean, the second operation will run. If it is false, it will not. SO basically what is happening is (true && (component)), since this.state.showList is true, the component will render.
nice! Thank you for stating that. The only thing is that I dont want to hide a component per say. I want to disable it so that a user cannot get the feedback from ui components as well as they can understand the behavior of the component by looking at its disabled state.
Not a problem! I've made a few edits to my original answer because I made a few boo boos. When you said disabled, I thought you meant hide it. You are tying to make it so you can still see the component, but not interact with it? Im not sure how exactly your component works, but that's another thing you can use conditional classNames for, which is a similar approach. Something like ``` <div onClick = {this.props.show && 'Some function'} ``` This will disable an onclick event from firing when it shouldn't. Have you looked into ternary operators yet? They are great, especially in React

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.