Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) Thinking in Components React Developer Tools

Posted by Muhammad Ali
Muhammad Ali
6,752 Points

Can anyone help men with this dev tool error

Warning: Received true for a non-boolean attribute button.

If you want to write it to the DOM, pass a string instead: button="true" or button={value.toString()}. in button (created by Counter) in div (created by Counter) in Counter (created by Player) in div (created by Player) in Player (created by App) in div (created by App) in App

Nicole Antonino
Nicole Antonino
12,834 Points
Nicole Antonino
Nicole Antonino
12,834 Points

You need to show us the code you wrote that brought about this error.

Muhammad Ali
Muhammad Ali
6,752 Points 
function Header(props){
  return(
    <header>
      <h1>{ props.title }</h1>
      <span className>Player:{props.totalPlayer}</span>
    </header>
  );
}
const Counter=()=>{
return(
<div className="counter">
  <button button className="counter-action decrement">+</button>
  <span button className="counter-score">35</span>
  <button button className="counter-action decrement">-</button>
</div>
);
}

const Player=()=> {
  return (
    <div className="player">
      <span className="player-name">
        Ranjha Eleven
      </span>
       <Counter />

    </div>
  );
}
 const App= ()=>{
   return(
     <div className="scoreboard">
        <Header title={"SocreBoard"} totalPlayer={5}/>
        {/* showing Playerlist*/}
        <Player />
     </div>

   );  
 }
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

1 Answer

Tim Oltman
Tim Oltman
7,730 Points
Tim Oltman
Tim Oltman
7,730 Points

Hi Muhammad,

It looks like there is a problem with your Counter component. 

const Counter=()=>{
return(
<div className="counter">
  <button button className="counter-action decrement">+</button>
  <span button className="counter-score">35</span>
  <button button className="counter-action decrement">-</button>
</div>
);
}

You have repeated "button" inside both of the button tags and the span tag. You should remove it to look like this:

const Counter=()=>{
return(
<div className="counter">
  <button className="counter-action decrement">+</button>
  <span className="counter-score">35</span>
  <button className="counter-action decrement">-</button>
</div>
);
}

React is interpreting "button" within these tags as you trying to pass a boolean value into the element.