CODEWITHSUNDEEP
htmlreactjs
A.S.J
A.S.J

Reputation: 637

ReactJS, dynamically displaying an HTML Element

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);
     |      ^

Upvotes: 1

Views: 2421

Answers (1)

bamtheboozle
bamtheboozle

Reputation: 6406

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

Upvotes: 3

Related Questions