Print only clicked radio button value(React)

Question

Print selected radio button value in console. If all radiogroup is answered then print in console only the selected= true radioValue. for example: if NO radiobutton= true its value is 2. It should print value 2. Like that all true radiovalue should print in console.
Thanks

//array of cards coming from the backend
const data = [
  {
    cardName: 'Do you want  sugar in your coffee',
    options: [
    { radioName: 'Yes',radioValue: '1', selected: false },
    { radioName: 'No',radioValue: '2', selected: false }]
  },
  {
    cardName: 'Do you want  milk in your coffee', 
    options: [
    { radioName: 'Yes',radioValue: '1', selected: false },
    { radioName: 'No',radioValue: '2', selected: false }]
  },
  {
    cardName: 'Do you want  low-fat-milk in your coffee', 
    options: [
    { radioName: 'Yes',radioValue: '1', selected: false },
    { radioName: 'No',radioValue: '2', selected: false }]
  }
];


class CardsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
cards: [],

    };
  }

  componentDidMount() {
    setTimeout(() => {
      // mimic an async server call
      this.setState({ cards: data });
    }, 1000);
  }

  onInputChange = ({ target }) => {
    const { cards } = this.state;
    const nexState = cards.map(card => {
      if (card.cardName !== target.name) return card;
      return {
        ...card,
        options: card.options.map(opt => {
          const checked = opt.radioName === target.value;
          return {
            ...opt,
            selected: checked
          }
        })
      }
    });
    this.setState({ cards: nexState })
  }

  onSubmit = () => { 
 console.log(this.state.cards.map(({ cardName, options }) => {
  const option = options.filter(({ selected }) => selected)[0]
  return ` ${option.radioValue}`
}))
  };

 onReset = () => {
        this.setState({cards:[]});
      }
  render() {
    const { cards } = this.state;
    return (
      <div>
        {
          cards.length < 1 ? "Loading..." :
            <div>
              {cards.map((card, idx) => (
                <ul>
                  {card.cardName}
                  {card.options.radioName}

                  {
                    card.options.map((lo, idx) => {
                      return <input
                        key={idx}
                        type="radio"
                        name={card.cardName}
                        value={lo.radioName}
                        checked={!!lo.selected}
                        onChange={this.onInputChange}
                      />

                    })
                  }
                </ul>
              ))
              }
              < button onClick={this.onSubmit}>Submit</button>
               < button onClick={this.onReset}>Clear</button>
            </div>
        }

      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

Change your log in onSubmit to this

console.log(this.state.cards.map(({ cardName, options }) => {
  const option = options.filter(({ selected }) => selected)[0]
  return `${cardName}: ${option.radioName}`
}))

This way you filter the options to the one, where selected is truthy, and take the first one.

To address your first question, just map over your this.state.cards array before doing the log and check, if there is exactly 1 option, where selected is true. If this is not the case, tell the user in whatever way you want.

Also you can remove your constructor and change it to that:

state = {
    cards: [],
}

Because you do not access your props in your constructor