react circular password strength indicator

passwordStrength.js

import React, { Component } from 'react'
const PasswordPower = (props) => {
  const tests = [
    [/^(?=.*[\d])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*])[\w!@#$%^&*]{8,}$/, 'strong password', '✓', '#a5dc86' , 0],
    [/^((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{6,})$/, "medium", "!", '#f8bb86' , 16],
    [/^[a-zA-Z0-9\-\_!@#$%^&*\.\(\)]{1,}$/, "week password", "❌", '#f27474' , 50]
  ]

  if (props.password) {
    for (let test of tests) {
      if (props.password.match(test[0])) {
        return  <div style={{width: '35px' , height: '35px' }} title={test[1]}>
        <svg height="100%" width="100%" viewBox="0 0 32 32" >
        <circle cx="50%" cy="50%" fill="none" strokeWidth="2" r="9" stroke="#E6ECF0"></circle>
        <text x="50%" y="50%" fontSize="8" fill={test[3]} textAnchor="middle" dy=".3em">{test[2]}</text>        
        <circle cx="50%" cy="50%" fill="none" strokeWidth="2" r="9" stroke={test[3]} strokeLinecap="round" style={{
        	strokeDashoffset: test[4],
        	strokeDasharray: 56.5487
        }}></circle>
        </svg>
        </div>;
      }
    }
  }
  return null
};

// usage <PasswordPower password={this.state.password} />