CODEWITHSUNDEEP
reactjssvg
HelloWorld
HelloWorld

Reputation: 4882

how can I hide an svg element with reactjs

How can I hide/show a element via visibility attribute by its Id="test" given that code:

import * as React from 'react';
import ImageSvg from '../mysvg.svg';

export class Test extends React.Component {

    constructor(props: any) {
        super(props);
    }

    public render() {
        return (<img src={ImageSvg } />);
    }
}

Upvotes: 1

Views: 1836

Answers (4)

arne hendricks
arne hendricks

Reputation: 36

If you but want the item to take up space when hidden so the layout doesn't shift, you could simply use inline-styles with visibility attribute:

  render() {
    return (
      <div style={{ visibility: 'hidden'}}>
        Hi guys
      </div>
    );
  }

This way you would still have an existing element rendered and just control visibility via styling.

Upvotes: 0

Araz Babayev
Araz Babayev

Reputation: 1770

I hope the code help you.

public render(){
  return (
    <div>  
        { this.state.show ? <img src={ ImageSvg } /> :'' }  
    </div>
  );
}

Upvotes: 1

Sangsom
Sangsom

Reputation: 437

Try conditional rendering:

    public render() {
        return {this.props.show && <img src={ImageSvg } />}
    }

In this case if the show property will be true then <img /> will be rendered if no, then nothing will be rendered.

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

Upvotes: 0

Himanshu Chaudhary
Himanshu Chaudhary

Reputation: 470

I will use props for that. Something like :

  render() {
  if(!this.props.show){
    return '';
  }
    return <img src={ImageSvg } />;
  }

Then you can use it like 

<Test show="true" />

Upvotes: 0

Related Questions