Suzangithub

const List= (props) => {
  { /* change code below this line */ }
  return <p>{props.tasks.join(", ")}</p>
  { /* change code above this line */ }
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }

Suzangithub

// change code below this line
class MyComponent extends React.Component {
  render() {
    return (
        <h1>My First React Component!
        </h1>
    )
  }
  };
  ReactDOM.render(<MyComponent />,document.getElementById('challenge-node'));

Suzangithub

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        { /* change code below this line */ }
<NonCitrus />

Suzangithub

const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        <li>Apples</li>
        <li>Blueberries</li>
        <li>Strawberries</li>
        <li>Bananas</li>
      </ul>

Suzangithub

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {

Suzangithub

// write your code here


const JSX = <div>
  <h1>Heading.</h1>
  <p>Paragraph</p>
 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

Suzangithub

<style type='text/sass'>
  h3{
    text-align: center;
  }
  .info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }
  .info-important{

Suzangithub

<style type='text/sass'>
    $x: 1;
  @while $x < 11 {
    .text-#{$x} { font-size: #{5*$x}px;}
    $x: $x + 1;
  }
 
  
</style>

Suzangithub

<style type='text/sass'>
  $colors: (color1: blue, color2: black, color3: red);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

.blue-bg {
  background-color: blue;
}

Suzangithub

<style type='text/sass'>

  
  @for $j from 1 to 6 {
    .text-#{$j} { font-size: 10px*$j; }
  }
  
</style>