CODEWITHSUNDEEP
javascripthtmlreactjssvg
gitmcgee
gitmcgee

Reputation: 177

SVG react component grabbing element by id

I have a SVG as a react component called AdultDog. My plan is to make all the tags in this react component that dont contain a certain number in the ID field disappear so that only tags with an id that contains a number are shown. i.e tags that have an ID 402 in it are shown. Ive tried to use document.querySelectorAll(":not([id^='402'])"); but this has two problems.

  1. document.querySelectorAll grabs the whole html page not the AdultDog component, so how can i make it only select AdultDog?
  2. with document.querySelectorAll(":not([id^='402'])"); it only selects ids called '402' but i want ids that have other words in it. i.e 402-tooth and 402-recede
import {ReactComponent as AdultDog} from '../../images/dog-dental-chart-with-treatments_v6.svg';

function DisplayTooth(props) {
  const navigate = useNavigate();
  console.log(props.toothnumber, 'Display tooth')

  useEffect(() => {
    var elements = document.querySelectorAll(":not([id^='tooth-402-GH-02'])");
    console.log('elements', elements)
  }, [props.toothnumber])


    return (<div>
        <div className='tooth-box'>
            <AdultDog></AdultDog>
        </div>
    </div>
   
    );
  }
  
  export default DisplayTooth;

This is quite a lot so any help would be appreciated! i cant find much documentation on SVGs as is.

Upvotes: 0

Views: 690

Answers (1)

Dave
Dave

Reputation: 7717

Typically, you'd be creating all the <AdultDog> components, e.g. {dogs.map(dog => <AdultDogs key={dog.id} dog={dog}/>)} and you could just add a filter e.g. dogs.filter(your filter logic here).map() to drop some of the dogs.

Another approach is to add a class to some elements so you can toggle it on/off.

Upvotes: 2

Related Questions