title: How can I replace specific strings within an object?
body: <p>In my application's header, I have two anchor elements (which link to the &quot;Feed&quot; and &quot;Bio&quot; pages) that are styled identically. When they are hovered over, they trigger different styling from their default styling (but the two anchor elements still share the same styling as each other in their hovered states too). Also, if a user is currently on a page associated with the anchor link in the header, that active state's styling is identical to the hovered state style. All styling is inline, since we're not using a style sheet unfortunately -- so we've been using ternary operators to trigger different styling depending on the anchor elements' states. The following is an object I created that contains all the styling for the Bio link:</p>
  <pre><code>const bioStyle = { 
    color: presentPage === 'bio' || hover ? 'green' : 'pink',
    borderTop: presentPage === 'bio' || hover ? '3px dotted purple' : 'none',
    paddingTop: presentPage === 'bio' || hover ? '1.5rem' : 'none'
  }
  </code></pre>
  <p>The <code>bioStyle</code> above will be set as the value for the <code>style</code> attribute in the Bio's anchor element in the return function like this: <code>style={bioStyle}</code>. The <code>feedStyle</code> object is the same as the <code>bioStyle</code>; however, the difference is that the conditions in all of the ternary operators change from <code>presentPage === 'bio'</code> to <code>presentPage === 'feed'</code>. Rather than writing nearly the same code again, I thought I could perhaps create the <code>feedStyle</code> by using a replace method on the <code>bioStyle</code> and swap out all of the <code>'bio'</code> values with <code>'feed'</code>.</p>
  <p>I've looked into the <code>.replace()</code> method, but that only works on strings. Is there any other way I can achieve what I'm desiring?</p>