Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics Thinking in Components React Developer Tools

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,809 Points

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

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,714 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.