ReactJS, dynamically displaying an HTML Element

Question

I just got started with ReactJS and am currently implementing ReactJS into my current project. What I am trying to right now, is the following:

I have an XML-file with several file names (they're added dynamically at another point, which is not relevant for this question. Anyway, my point is, you can't predict what/how many elements are going to be in that file). I'm using XMLHttpRequest and JavaScript, in order to save the data into a list. OnClick on a button, I want to show/hide said list. I'm creating the button using ReactJS.

Creating the Button:

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

class RaisedButtons extends React.Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this); 
    }

    handleClick(e) {
        this.props.toggleView();
    }

    render() {
    const { classes } = this.props;
      return (
        <div>
          <Button raised color="primary" className={classes.button} onClick={this.handleClick}>
          {this.props.title}
          </Button>
        </div>
      );
    }
}
RaisedButtons.propTypes = {
   classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RaisedButtons);

Adding the toggle-function:

export default class EditButton extends React.Component {
constructor(props) {
    super(props);
    this.state = {show: false};
    this.toggleView = this.toggleView.bind(this);
}

toggleView() {
    this.setState({
        show: !this.state.show
    });
}

render() {
    return (
        <div>
        <ButtonRaised toggleView={this.toggleView} title="Edit"/>
        <div if={this.state.show} tag="section"></div> //Supposed to be the list
        </div>
        );
    }
}

I know that the point of ReactJS is to add elements dynamically, however, I already have all the code to get the XML-data, to save it etc., there I would much prefer to simply show/hide the already generated list using ReactJS. I read about React.findDOMNode and refs, however, that didn't seem to work for me and also, I didn't know how to display it.

I tried the following(before the render-method):

var object = React.findDOMNode(this.refs.savedFiles);

and this inside return statement:

<div if={this.state.show} tag="section">
    object
</div>

but obviously it didn't work. And I'm getting the following error message: Syntax error: Unexpected token

Does anyone know how to do that/ if it is possible?

Edit: here is the error I'm getting:

./src/toggleButton.js
Syntax error: Unexpected token (19:5)

  17 |  }
  18 |  
> 19 |  var object = React.findDOMNode(this.refs.savedFiles);
     |      ^

You can't declare a variable directly in a component class, you have to declare it in render method : render() { const savedFilesNode = React.findDOMNode(this.refs.savedFiles); ... — Dyo
– Dyo, Commented Dec 13, 2017 at 14:14
I mean, calling a variable object, name your variables as something meaningful that in time you can still look at your code without having to scroll up to it's definition and check from where this variable is coming now — Icepickle
– Icepickle, Commented Dec 13, 2017 at 14:26
oh yeah I was pretty certain you meant that, it's not called object in my actual code, don't worry — A.S.J
– A.S.J, Commented Dec 13, 2017 at 14:27

bamtheboozle · Accepted Answer · 2017-12-13 14:53:45Z

3

You can use plain JS in your render function. Something like this:

{this.state.show && <div tag"section">{ object }</div> }

This will evaluate whether state.show is true or not, and render either the div or null, using the ternary operator.

You can read more about conditional rendering in React here: https://reactjs.org/docs/conditional-rendering.html

edited Dec 13, 2017 at 14:53

answered Dec 13, 2017 at 13:31

bamtheboozle

6,5062 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

A.S.J Over a year ago

I tried using this in my code, but it threw the error, which I mention in my question above (it is referring to the variable name). The toggle isn't the problem, the problem is that I can't seem to display the list

bamtheboozle Over a year ago

The error you're getting is referring to if={this.state.show}. This syntax does not exist in react.

bamtheboozle Over a year ago

You also need to wrap object in curly braces, like so {object}. I have edited my post.

A.S.J Over a year ago

thanks for the hint regarding the curly braces, I totally forgot about that. I edited my question to show the whole error message I'm receiving, I'm already getting that message on line 19, so I'm pretty sure it's because of the variable, but I can't seem to figure out what's wrong exactly

T Porter Over a year ago

This is the correct way to render content conditionally.

|

Collectives™ on Stack Overflow

ReactJS, dynamically displaying an HTML Element

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related